DEV Community

2 Ways to Merge Arrays in JavaScript

Samantha Ming on February 25, 2019

Here are 2 ways to combine your arrays and return a NEW array. I like using the Spread operator. But if you need older browser support, you shoul...

Read full post

Thomas Graf • Feb 26 '19

Maybe it's a little bit longer, but you don't have to create an array just to use the prototypes concat method.

Instead of

[].concat([1,2],[3,4])

you could also write that one:

Array.prototype.concat([1,2],[3,4])

Samantha Ming • Mar 2 '19

nice, thanks for sharing that 👍

Thomas Graf • Feb 26 '19

Just for fun I tried it on jsperf and the first one is way faster. Never thought that. But it's probably just a micro optimization.

jsperf.com/empty-array-conact-vs-p...

Mic • Feb 25 '19

From example "A. Using Spread"

I think forgot put "..." before "array2"

function combineArray(array1, array2) {
  return [...array1, array2]; // <-------------- HERE
}

const isArray = [1,2,3];
const notArray = 'random';

combineArray(isArray, notArray);
// 😱 [ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ]

sorry if i'm wrong.

Samantha Ming • Feb 25 '19

Ahhhh my mistake 😱 Thank you for letting me know 👍

Kyle Agronick • Jun 17 '19 • Edited

Surprisingly concat is way faster. Doing any type of spread is 91% slower. jsperf.com/concat-vs-spreader/1

Edit: Actually, it seems to depend on the size of the array. With 10 elements in each array spread is faster. With 100 elements in each array spread is about 75% slower.

Samantha Ming • Jun 17 '19

Interesting, thanks for writing out the test! Good to keep in mind if you need to optimize the code. But I wonder as spread become more popular, if the browser will start optimizing it ... maybe concat is faster because it’s been around longer and the browser is deciphering it 🤔

Kyle Agronick • Jun 18 '19

I wondered that too. You would think it would just call concat internally. I'm not sure what would cause the huge difference.

Mihail Malo • Feb 25 '19

The "A. Using Spread" example fails to demonstrate the error, since it says return [...array1, array2] instead of return [...array1, ...array2] (it doesn't actually spread the string)
Instead it demonstrates the happy path of "immutably pushing" the string.

I firmly believe concat is dangerous and should only be used with arrays, not loose elements. Because your loose element will end up being an array someday, and you will SUFFER.
And on the other hand, it doesn't work on arraylikes:

[].concat([document.querySelector('body')],document.querySelectorAll('*')) // nope

;[document.querySelector('body'), ...document.querySelectorAll('*')] // yep

Samantha Ming • Feb 25 '19

Oops, that’s a typo 😬 let me fix that 😰

Alex Lohr • Feb 25 '19

To emulate spread parameters in older Javascript, you can use cars.push.apply(cars, trucks). However, that doesn't read half as nice.

Samantha Ming • Mar 2 '19

older support is definitely very important, especially if all your clients refuse to upgrade to newer browsers 😝

Itachi Uchiha • Feb 25 '19 • Edited

[...['a', 'l'], ...['i', ...['ran', ...[...['d', ...['o'], ...['m']]]]]]

I like spread parameters :)

Thanks.

Samantha Ming • Feb 25 '19

Same here! But that’s some crazy nesting you have there 😂

Mohammad Amin Khakzadan • May 31 '19

javascript looks awesome, it's like that you are playing a game when you are programming in that. but that's not good. check jsfuck.com/.

Oliver Mensah • Feb 25 '19

I also think the same as it doesn't seem obvious to me that the cars array isn't being changed. I enjoy your explanations

Samantha Ming • Feb 25 '19

Awesome, glad you found it helpful 🙂👍

Adrián Norte • Feb 25 '19

I very much prefer the [].concat way because it's extremely obvious what is going on.

Samantha Ming • Feb 25 '19

I learned that syntax from Object.assign. I just notice how much more clear it is with it. Glad you think so too 😁