as the top voted answer says, a.push(...b)
is probably the correct answer taking into account the size limit issue.
On the other hand, some of the answers on performance seem out of date.
These numbers below are for 2022-05-20
from here
At appears that push
is fastest across the board in 2022. That may change in the future.
Answers ignoring the question (generating a new array) are missing the point. Lots of code might need/want to modify an array in place given there can be other references to the same array
let a = [1, 2, 3];
let b = [4, 5, 6];
let c = a;
a = a.concat(b); // a and c are no longer referencing the same array
Those other references could be deep in some object, something that was captured in a closure, etc...
As a probably bad design but as an illustration, imagine you had
const carts = [
{ userId: 123, cart: [item1, item2], },
{ userId: 456, cart: [item1, item2, item3], },
];
and a function
function getCartForUser(userId) {
return customers.find(c => c.userId === userId);
}
Then you want to add items to the cart
const cart = getCartForUser(userId);
if (cart) {
cart.concat(newItems); // FAIL 😢
cart.push(...newItems); // Success! 🤩
}
As an aside, the answers suggesting modifying Array.prototype
are arguably bad adivce. Changing the native prototypes is bascially a landmine in your code. Another implementation maybe be different than yours and so it will break your code or you'll break their code expecting the other behavior. This includes if/when a native implmentation gets added that clashes with yours. You might say "I know what I'm using so no issue" and that might be true at the moment and you're a single dev but add a second dev and they can't read your mind. And, you are that second dev in a few years when you've forgotten and then graft some other library (analytics?, logging?, ...) on to your page and forget the landmind you left in the code.
This is not just theory. There are countless stories on the net of people running into these landmines.
Arguably there are just a few safe uses for modifying a native object's prototype. One is to polyfill an existing and specified implementation in an old browser. In that case, the spec is defined, the spec is implemented is shipping in new browsers, you just want to get the same behavior in old browsers. That's pretty safe. Pre-patching (spec in progress but not shipping) is arguably not safe. Specs change before shipping.
a.push(...b)
. It's similar in concept to the top answer, but updated for ES6.