JavaScript Merge Two Arrays Guide

Merging two arrays is a common task in JavaScript. You often need to combine data from different sources. This guide shows you the best ways to do it.

We will cover three main methods. Each method has its own use case. You will learn when to use each one.

By the end, you will be able to merge arrays with confidence. Let's start with the most popular method.

Using the Spread Operator

The spread operator (...) is the cleanest way to merge arrays. It expands an array into individual elements. You can combine two arrays into one new array.

This method is fast and readable. It works with modern JavaScript (ES6+).

 
// Merge two arrays using spread operator
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const mergedArray = [...array1, ...array2];

console.log(mergedArray);
// Output: [1, 2, 3, 4, 5, 6]

[1, 2, 3, 4, 5, 6]

You can also merge more than two arrays. Just add more spread operators.

 
// Merge three arrays
const a = ['a', 'b'];
const b = ['c', 'd'];
const c = ['e', 'f'];

const all = [...a, ...b, ...c];
console.log(all);
// Output: ['a', 'b', 'c', 'd', 'e', 'f']

The spread operator does not change the original arrays. It creates a new array. This is important for immutability.

Using the concat Method

The concat() method is a built-in array method. It merges two or more arrays. It returns a new array.

This method is available in all JavaScript versions. It is very reliable.

 
// Merge arrays using concat
const first = [10, 20];
const second = [30, 40];

const result = first.concat(second);

console.log(result);
// Output: [10, 20, 30, 40]

[10, 20, 30, 40]

You can pass multiple arrays to concat(). It will merge them all.

 
// Merge multiple arrays with concat
const x = [1];
const y = [2, 3];
const z = [4, 5, 6];

const combined = x.concat(y, z);
console.log(combined);
// Output: [1, 2, 3, 4, 5, 6]

Like the spread operator, concat() does not modify the original arrays. It creates a new array. This is a safe approach.

Using push with Spread

If you want to modify an existing array, use push() with the spread operator. This adds elements from one array to another.

This method changes the original array. Use it when you need to update an array in place.

 
// Merge into existing array using push
let mainArray = [1, 2, 3];
const newItems = [4, 5];

mainArray.push(...newItems);

console.log(mainArray);
// Output: [1, 2, 3, 4, 5]

[1, 2, 3, 4, 5]

Note that we used let for the main array. This is because we are modifying it. It is a mutable operation.

You can also use push() with multiple arrays. Just spread each one.

 
// Push multiple arrays
let base = [0];
const one = [1, 2];
const two = [3, 4];

base.push(...one, ...two);
console.log(base);
// Output: [0, 1, 2, 3, 4]

Which Method Should You Use?

Each method has its best use case. Here is a quick guide.

Use the spread operator when you want a new array. It is the most readable. It works well for immutable data.

Use concat() when you need to merge many arrays. It is clear and reliable. It is also good for older codebases.

Use push() with spread when you need to modify an existing array. It is efficient for adding many items.

For more details on array operations, check our JavaScript Array Methods Guide. It covers many useful functions.

If you are new to arrays, see our JavaScript Array Variables Guide. It explains the basics.

Common Mistakes to Avoid

One common mistake is forgetting that concat() returns a new array. It does not change the original. Always assign the result to a variable.

Another mistake is using push() without the spread operator. This adds the entire array as a single element.

 
// Wrong way to push an array
let arr = [1, 2];
arr.push([3, 4]);
console.log(arr);
// Output: [1, 2, [3, 4]]  // Not merged!

[1, 2, [3, 4]]

Always use the spread operator with push() to merge elements properly.

Performance Considerations

For small arrays, all methods are fast. For large arrays, the spread operator and concat() have similar performance.

The push() method can be faster for adding many elements to an existing array. It does not create a new array.

In most cases, you do not need to worry about performance. Choose the method that makes your code clean and readable.

Conclusion

Merging arrays in JavaScript is simple. You have three main options: the spread operator, concat(), and push() with spread.

The spread operator is great for creating new arrays. The concat() method is reliable for multiple arrays. The push() method is best for modifying existing arrays.

Always choose the method that fits your use case. Keep your code clean and readable. Now you can merge arrays like a pro.