How to Append one Array to Another in JavaScript

Append one Array to Another with Spread Operator #

To append one array to another, use the spread operator (...) to unpack the values of the two arrays into a third array, e.g. const arr3 = [...arr1, ...arr2]. The spread operator can be used when all elements from an array need to be included in another array.

Copied!
const arr1 = ['a', 'b'];

const arr2 = ['c', 'd'];

const arr3 = [...arr1, ...arr2];

console.log(arr3); // 👉️ ['a', 'b', 'c', 'd']

In the code snippet, we use the spread operator (...) to unpack the values from two arrays into a third array.

The easiest way to think about it is:

1. We grab all the values from arr1 and add them to arr3.
2. Then we grab all the values from arr2 and add them to arr3.

Note that the ordering is preserved and all of the elements of arr1 come before the elements of arr2.

The spread operator is commonly used when you need to add new elements to an array, without changing the contents of the original array.

Copied!
const arr1 = ['a', 'b'];

const arr2 = [...arr2, 'c', 'd'];

console.log(arr3); // 👉️ ['a', 'b', 'c', 'd']

Append one Array to Another using concat #

To append one array to another, call the concat() method on the first array, passing it the second array as a parameter - const arr3 = arr1.concat(arr2). The concat method merges the two arrays and returns a new array.

Copied!
// Supported in IE

const arr1 = ['a', 'b'];
const arr2 = ['c', 'd'];

const arr3 = arr1.concat(arr2);

console.log(arr3); // 👉️ ['a', 'b', 'c', 'd']

We used the Array.contact method to merge two arrays into a third.

The method does not change the contents of the original arrays, instead it returns a new array.

The method takes the array(s) you want to concatenate into the new array as parameters.

Here's an example of calling the concat method with multiple arrays.

Copied!
const arr1 = ['a', 'b'];

const arr2 = arr1.concat(['c'], ['d'], ['e']);

console.log(arr2); // 👉️ ['a', 'b', 'c', 'd', 'e']

All of the arrays we passed to the contact method, including arr1 got merged into a new array.

You can even pass values directly into the contact method, without them being elements of an array.

Copied!
const arr1 = ['a', 'b'];

const arr2 = arr1.concat('c', 'd', ['e']);

console.log(arr2); // 👉️ ['a', 'b', 'c', 'd', 'e']

We passed two strings and an array to the contact method and they all got merged into the new array.

An alternative approach is to use the push method to append one array to another.

Append one Array to Another using push #

To append one array to another use the push() method on the first array, passing it the values of the second array. The push method is used to add one or more elements to the end of an array. The method changes the contents of the original array.

Copied!
const arr1 = ['a', 'b'];

const arr2 = ['c', 'd'];

arr1.push(...arr2);

console.log(arr1); // 👉️ ['a', 'b', 'c', 'd', 'e']

We use the spread operator (...) to unpack the values from arr2 when calling the Array.push method.

The push method takes one or more values as parameters. The parameters get pushed to the end of the array.

The method returns the new length of the array and it mutates the array's contents.

The push method approach is my least favorite of all approaches we covered in this article, but you might see it in some code bases so I've included it for completeness.

Most commonly I see the spread operator (...) being used to append one array to another in JavaScript.