How to Add New Elements to a JavaScript Array?

In this article, we will look at several ways to add new elements to a JavaScript array. Depending on your project's requirements and needs you should choose the method that works best for you.

For this article, we'll be using the following array in our examples:

const arr = ['foo', 'bar'];

Using the Spread Operator

The easiest and perhaps the best way to add new elements to the array is using the spread operator like so:

const newArr = [...arr, 'baz', 'qux'];

// output: Array(4) ["foo", "bar", "baz", "qux"]

Using the spread operator you can decide where you wish to add new elements and where the old ones go in the array. For example, to add elements to the start of the array, we'd simply do:

const newArr = ['baz', 'qux', ...arr];

// output: Array(4) ["baz", "qux", "foo", "bar"]

Prior to using the spread operator, make sure to check the browser compatibility.

Add a New Index at the End of Array

We could simply use the array length property as the array index to add new values to an array; this would:

• Append a value to the end of an array;
• Modify the length and contents of the original array.

arr[arr.length] = 'baz';
arr[arr.length] = 'qux';

// output: Array(4) ["foo", "bar", "baz", "qux"]

Using Array push Method

The push() method:

• Appends one or more elements to the end of an array;
• Modifies the length and contents of the original array;
• Returns the new length of the array.

arr.push('baz', 'qux');

// output: Array(4) ["foo", "bar", "baz", "qux"]

Returning the New Array With Array push Method:

Since the push() method returns the new length of the array, you could use the comma operator to return the resulting array with the new values:

const newArr = (arr.push('baz', 'qux'), arr);

// output: Array(4) ["foo", "bar", "baz", "qux"]

The comma operator works by evaluating each of its operands (from left to right) and it returns the value of the last operand.

Using the Array unshift Method

The unshift() method:

• Adds one or more elements to the beginning of an array;
• Modifies the length and contents of the original array;
• Returns the new length of the array.

arr.unshift('baz', 'qux');

// output: Array(4) ["baz", "qux", "foo", "bar"]

Returning the New Array With Array unshift Method:

Since the unshift() method returns the new length of the array, you could use the comma operator, as explained earlier, to return the resulting array with the new values:

const newArr = (arr.unshift('baz', 'qux'), arr);

// output: Array(4) ["baz", "qux", "foo", "bar"]

Using the Array concat Method

The concat() method:

• Merges two or more arrays;
• Does NOT change the existing array;
• Returns a new array.

const newArr = arr.concat('baz', 'qux');

// output: Array(4) ["foo", "bar", "baz", "qux"]

Merging Arrays

In the previous examples we've appended strings to the array, but what happens when we try to add arrays to our original array?

Merging Arrays With concat() Method:

Since the default behavior of concat() is to merge arrays, if we concatenated two or more arrays, the resulting array would have values from all those arrays, for example:

const arr2 = ['baz', 'qux'];

const newArr = arr.concat(arr2);

// output: Array(4) ["foo", "bar", "baz", "qux"]

Compare this with push() and the index technique which add the array to the end of the original array, and unshift() which adds the array to the start of the original array, for example:

const arr2 = ['baz', 'qux'];

arr.push(arr2);

// output: Array(3) ["foo", "bar", ["baz", "qux"]]

The default behavior of push() and the index technique is the same as concatenating nested arrays, for example:

const arr2 = [['baz', 'qux']];

const newArr = arr.concat(arr2);

// output: Array(3) ["foo", "bar", ["baz", "qux"]]

Similarly, you could reverse the concatenation to achieve the same result as unshifting an array, for example:

const arr2 = [['baz', 'qux']];

const newArr = arr2.concat(arr);

// output: Array(3) [["baz", "qux"], "foo", "bar"]

Merging Arrays With push() or unshift() Method:

Using push() or unshift() method you could achieve the same result as with concat() method by spreading the second array, like so:

// using the apply() method:
arr.push.apply(arr, arr2);

// or, using the spread operator:
arr.push(...arr2);

// output: Array(4) ["foo", "bar", "baz", "qux"]

As mentioned earlier in the article, remember to check the browser compatibility before using the spread operator.