3 Patterns to Merge Arrays in JavaScript

May 28, 2023

Merging 2 arrays in JavaScript means combining the elements from two arrays to create a new, bigger array. We recommend using the spread operator to create a new array with the merged values.

const array = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [...array, ...array2]; // [1, 2, 3, 4, 5, 6]

The spread operator can also merge more than two arrays.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = [7, 8, 9];

[...array1, ...array2, ...array3]; // [1, 2, 3, 4, 5, 6, 7, 8, 9]

In-Place with push()

If you want to merge one array into another array in-place, modifying the original array, you can use the Array push() method with the spread operator as follows.

const array = [1, 2, 3];
const array2 = [4, 5, 6];
array.push(...array2); // [1, 2, 3, 4, 5, 6]

Note: Be careful: push() with spread operator can cause a stack overflow error if array2 is massive.

const array = [];
const array2 = Array(10_000_000).fill(null);

// RangeError: Maximum call stack size exceeded
array.push(...array2);

Using concat()

As an alternative to using the spread operator, you can use the Array concat() method to merge arrays. The concat() function returns a new array that consists of the first array concatenated with the second.

const array = [1, 2, 3];
const array2 = [4, 5, 6];
const array3 = array.concat(array2); // [1, 2, 3, 4, 5, 6]

array3 === array; // false

Using the spread operator is typically superior to using concat(), but concat() has better browser support - see concat() browser support vs spread operator browser support.


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Fundamentals Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!