Blog

To append one array to another in JavaScript, you can use any of the following methods –

1. Use […arr1, …arr2] to unpack all the values of arr1 and arr2 into another array.
2. Use arr1.concat(arr2) to append all values to arr2 to arr1.
3. Use arr1.push(…arr2) to unpack all values of arr2 and push it to the end of arr1.

Let’s discuss the above methods in detail.

Append One Array To Another In JavaScript

Method 1: Use Spread Operator([…arr1, …arr2])

We can use the spread operator to unpack all the values from arr1 and arr2 into another array. This is the most straightforward method to append one array to another in JavaScript –

const arr1 = [‘a’, ‘b’, ‘c’];

const arr2 = [‘d’, ‘e’, ‘f’];

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

console.log(arr3);

// Output: [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’]

This method doesn’t change the original array. It returns a new array that is the combination of arr1 and arr2.

Method 2: Use Array.concat() Method

The .concat() method can be used to append one array to another. It returns a new array which is the concatenation of the both arrays. This method does not mutate the original array, which means it doesn’t change arr1 –

const arr1 = [‘a’, ‘b’, ‘c’];

const arr2 = [‘d’, ‘e’, ‘f’];

const arr3 = arr1.concat(arr2);

console.log(arr3);

// Output: [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’]

concat() method can be used to append not just arrays, but even values of any type like strings, numbers, objects etc.

Here is an example where we have concatenated a number to an array –

const arr1 = [‘a’, ‘b’, ‘c’];

const arr2 = 3;

const arr3 = arr1.concat(arr2);

console.log(arr3);

// Output: [‘a’, ‘b’, ‘c’, 3]

Here is an example where we have appended an array as well as a number to another array –

const arr1 = [‘a’, ‘b’, ‘c’];

const arr2 = 3;

const arr3 = [‘d’, ‘e’, ‘f’];

const arr4 = arr1.concat(arr2, arr3);

console.log(arr4);

// Output: [‘a’, ‘b’, ‘c’, 3, ‘d’, ‘e’, ‘f’]

Method 3: Use Array.push() Method

The .push() method can also be used to append one array to another. Take a look at the following example –

const arr1 = [‘a’, ‘b’, ‘c’];

const arr2 = [‘d’, ‘e’, ‘f’];

arr1.push(...arr2);

console.log(arr1);

// Output: [‘a’, ‘b’, ‘c’, ‘d’, ‘e’, ‘f’]

This method mutates the original array, which means it changes arr1. This is because .push() method appends all the values of arr2 to the end of arr1.

Note that we use the spread operator (…) before arr2 here to unpack it. Otherwise, push() would have added only one element to the array i.e. arr2 itself and not its elements!

If you don’t want to mutate the original array, use .concat() method.

Comparison Of All Methods

Here is a comparative table of all the three methods discussed so far –

Conclusion

In conclusion, there are many ways to append one array to another in JavaScript. You can use any of the above-mentioned methods depending on your use case.

Happy Coding! 🙂