How to Add Elements to an Array

There are several ways to add elements to existing arrays in JavaScript, as we demonstrate on this page. You can add elements to the end of an array using push, to the beginning using unshift, or to the middle using splice.

You can also add a new element to an array simply by specifying a new index and assigning a value, as the following demonstrates:

var ar = ['one', 'two', 'three'];
ar[3] = 'four'; // add new element to ar

How to Add Elements to the End of an Array

You can use the array's length property to add an element to the end of the array:

ar[ar.length] = 'five';
console.log( ar ); //  ["one", "two", "three", "four", "five"]

Array push Method

The array push method allows you to add one or more elements to the end of an array. It modifies the array upon which it is invoked and returns the new length of the array. The following shows how to add a single new element to an existing array:

var ar = ['one', 'two', 'three'];
ar.push('four');
console.log( ar ); // ["one", "two", "three", "four"]

You can use the push method to add more than one new element to an array at a time. The new elements will be added in the order in which you pass them:

ar.push('five', 'six'); // add 2 more elements to ar
console.log( ar ); // ["one", "two", "three", "four", "five", "six"]

Array concat Method

The concat method also adds elements to an array. Unlike the push method, it does not modify the existing array, but instead returns a new array.

Here we invoke concat on an array (ar), passing a single argument. We assign the result to a new array (ar2) and view that array using console.log:

var ar = ['one', 'two', 'three'];
var ar2 = ar.concat('four');
console.log( ar2 ); // ["one", "two", "three", "four"]

The concat method will accept multiple arguments:

var ar3 = ar.concat('four', 'five', 'six');
console.log( ar3 ); //  ["one", "two", "three", "four", "five", "six"]

If an argument is itself an array, its elements will be added rather than the array itself:

var ar4 = ar.concat( ['four', 'five', 'six'] );
console.log( ar4 ); //  ["one", "two", "three", "four", "five", "six"]

This only applies to the first level however and not to an array contained in an array:

var ar5 = ar.concat( [4, 5, [6, 7, 8] ] );
console.log( ar5 ); // ["one", "two", "three", 4, 5, [6, 7, 8]]

Notice that the elements of the outer array argument to concat are added individually while the sub-array is added as an array.

How to Add Elements to the Beginning of an Array

The array unshift method is used to add elements to the beginning of an array. It accepts multiple arguments, adjusts the indexes of existing elements, and returns the new length of the array. The unshift method modifies the array on which it is invoked.

First we invoke unshift passing a single argument, then multiple arguments, displaying the results using console.log:

var ar = ['one', 'two', 'three'];
// add single element
ar.unshift('zero');
console.log( ar ); // ["zero", "one", "two", "three"]

// add multiple elements
ar.unshift(0, 1, 2, 3);
console.log( ar ); // [0, 1, 2, 3, "zero", "one", "two", "three"]

How to Insert Elements in the Middle of an Array

The array splice method can be used for adding and/or removing elements from an array. The first argument specifies the location at which to begin adding or removing elements. The second argument specifies the number of elements to delete, if any. When using splice to add elements to an array, the second argument would be zero. The third and subsequent arguments are elements to be added to the array.

var ar = [1, 2, 3, 4, 5, 6];
// arguments: start position, number of elements to delete, elements to add
ar.splice(3, 0, 'a', 'b', 'c');

console.log( ar ); // [1, 2, 3, "a", "b", "c", 4, 5, 6]

The splice method modifies the array on which it is invoked. The indexes of elements after the inserted ones are updated to reflect their new positions. The splice method returns an empty array when no elements are removed; otherwise it returns an array containing the removed elements.