concat(array) vs push(...array)

I've been using .push(...) method to concatenate 2 arrays unpacking the second array, using the three dots notation, and passing that as the argument (array1.push(...array2)). But I just noticed that .concat(...) does the same thing, at least as far as I know.

I just want to know what are the benefits of using one over the other, if any, aside from .concat(...) being more idiomatic.

concat(array) vs push(...array)

I've been using .push(...) method to concatenate 2 arrays unpacking the second array, using the three dots notation, and passing that as the argument (array1.push(...array2)). But I just noticed that .concat(...) does the same thing, at least as far as I know.

I just want to know what are the benefits of using one over the other, if any, aside from .concat(...) being more idiomatic.

• javascript
• arrays
• concatenation
• push

• 3 The internal mechanics are probably almost pletely identical, use whichever you thinks looks better. Let the people who are paid to maintain and improve the JavaScript runtimes worry about micro-efficiency. – Pointy Commented May 21, 2023 at 13:18
• 1 push() mutates the array you're pushing to while concat() creates a new array with the elements of both arrays, leaving the original array intact. So it's a matter of the side-effects you want (or don't want). – Lennholm Commented May 21, 2023 at 13:23
• 1 You may run into SyntaxError: too many function arguments using .push(…arr) if arr is very long. – James Commented May 21, 2023 at 13:28
• I don't quite follow the question, it would be much clearer if you gave a proper example of each of the two things you're trying to do. If you want to create a new array containing the elements of an existing array followed by the elements of another existing array, you shouldn't use push at all. You should use either result = first.concat(second) or result = [...first, ...second]. – T.J. Crowder Commented May 21, 2023 at 13:53
• @T.J. Crowder I just discovered the concat() method, before that I was simply using push() for everything and worked just fine, and since it was only for some university assignments I just did not bother too much about it. – Dain Commented May 21, 2023 at 13:59

2 Answers 2

JavaScript engines typically put a cap on the number of arguments you can pass to a method before they throw an error, for example, the below throws an error in Chrome:

const arr = Array(150000).fill(0);
const arr2 = [];
arr2.push(...arr);

Whereas when using .concat(), you'll only be passing the one array to the method, so you don't get the error:

const arr = Array(150000).fill(0);
const arr2 = [];
const res = arr2.concat(arr);
// res is an array with 150000 `0`s

Additionally, with .push() + ..., you're effectively doing two iterations over your iterable/array, one for unpacking its contents as arguments to the .push() method, and then another for one done internally by the .push() method itself to iterate through each of the arguments and append it to the target array.

Another noticeable difference is in what both methods return, .concat() will return a new array and won't modify the target, which can be useful in methods such as .map() or .reduce() where you need to produce a new array without mutating the original. Whereas .push() will return the length of the updated array and will modify the target, so that is another difference to consider.

As pointed out by @T.J. Crowder, the iterator of arrays which is invoked when using the spread syntax ... does not preserve blanks in sparse arrays, instead it unpacks them as undefined values, meaning that if the array you're specifying is sparse when using .push() + ... you'll get undefined for the blanks, whereas the blanks will be preserved when using .concat() directly:

const arr = Array(3); // this is a sparse array, [empty × 3], not to be confused with [undefined, undefined, undefined]
const arr2 = [];
arr2.push(...arr); // Here `...` bees: arr2.push(undefined, undefined, undefined);
console.log(arr2); // [undefined, undefined, undefined]

const arr3 = [];
console.log(arr3.concat(arr)); // Retains empties: [empty × 3]

See browser console for results

I don't understand if you want to add an Array into another or just make one Array made of two Arrays.

In the last case this is a short way to concatenate Arrays too by using spread syntax:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const binedArray = [...arr1, ...arr2];
console.log(binedArray);

Note:

If you need to preserve the original arrays, this code above is suitable, like the concat() method.

The push() method will modify your initial Array.