snippetjavascriptTip

How do I merge two arrays in JavaScript?

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

javascripttwohowarraysmerge

Problem

The spread operator (...) was introduced in ES6 and can be used to merge two or more arrays, by spreading each one inside a new array:
Array.prototype.concat() is a method on the Array prototype and can be used to create a new array, either by concatenating both arrays to a new array or one array to the other. Both methods result in a new array, without mutating the original:
The spread operator version is definitely shorter and as readable as the Array.prototype.concat() one. Apart from that, the spread operator seems to be slightly faster based on some benchmarks I have performed (as of Aug, 2020 on Google Chrome 84 - this might or might not be the case in the future, as new optimizations land in different browsers).
However, Array.prototype.concat() can deal with non-array values better than the spread operator can, which might be something to consider when merging values that you are not certain are arrays:
As you can see in the above example, the spread operator either throws an error or doesn't output the correct result when passed a non-iterable object. Array.prototype.concat() on the other hand has no trouble being passed mixed input.

Solution

const a = [1, 2, 3];
const b = [4, 5, 6];

const merged = [...a, ...b]; // [1, 2, 3, 4, 5, 6]

The spread operator version is definitely shorter and as readable as the Array.prototype.concat() one. Apart from that, the spread operator seems to be slightly faster based on some benchmarks I have performed (as of Aug, 2020 on Google Chrome 84 - this might or might not be the case in the future, as new optimizations land in different browsers).
However, Array.prototype.concat() can deal with non-array values better than the spread operator can, which might be something to consider when merging values that you are not certain are arrays:
As you can see in the above example, the spread operator either throws an error or doesn't output the correct result when passed a non-iterable object. Array.prototype.concat() on the other hand has no trouble being passed mixed input.
So what's the verdict? Use the spread operator (...) whenever you know your inputs are arrays, as it performs better and is easy to read and understand. Favor Array.prototype.concat() when you are uncertain of one or more of the inputs and do not want to add additional checks, as it handles those cases more gracefully.

Code Snippets

const a = [1, 2, 3];
const b = [4, 5, 6];

const merged = [...a, ...b]; // [1, 2, 3, 4, 5, 6]

const a = [1, 2, 3];
const b = [4, 5, 6];

const merged = [].concat(a, b); // [1, 2, 3, 4, 5, 6]
// -- OR --
const alsoMerged = a.concat(b); // [1, 2, 3, 4, 5, 6]

const a = [1, 2, 3];
const b = true;
const c = 'hi';

const spreadAb = [...a, ...b]; // Error: b is not iterable
const spreadAc = [...a, ...c]; // [1, 2, 3, 'h', 'i'], wrong result
// You should use [...a, b] and [...a, c] instead

const concatAb = [].concat(a, b); // [1, 2, 3, true]
const concatAb = [].concat(a, c); // [1, 2, 3, 'hi']

Context

From 30-seconds-of-code: merge-arrays

Revisions (0)

No revisions yet.