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.