loading...

2 Ways to Merge Arrays in JavaScript

samanthaming profile image Samantha Ming ・4 min read

Code Tidbit by SamanthaMing.com

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 should use Concat.

// 2 Ways to Merge Arrays 

const cars = ['πŸš—', 'πŸš™'];
const trucks = ['🚚', 'πŸš›'];

// Method 1: Concat 
const combined1 = [].concat(cars, trucks);

// Method 2: Spread
const combined2 = [...cars, ...trucks];

// Result
// [ 'πŸš—', 'πŸš™', '🚚', 'πŸš›' ]

Alternative Concat Syntax

Alternatively, you can also write the concat method, in this regard:

const cars = ['πŸš—', 'πŸš™'];
const trucks = ['🚚', 'πŸš›'];

const combined = cars.concat(trucks);
// [ 'πŸš—', 'πŸš™', '🚚', 'πŸš›' ]

console.log(cars); // ['πŸš—', 'πŸš™'];
console.log(trucks); // ['🚚', 'πŸš›'];

As you can see, this way of writing it doesn't manipulate or change the existing array.

Which one should I pick?

Let's list out both versions, so you can see it in comparison.

// Version A:
const combinedA = [].concat(cars, trucks);

// Version B:
const combinedB = cars.concat(trucks);

So now the question is, which one should I pick πŸ€”. I prefer Version A because I think the intention is a lot more clear. Just by looking at it, I know I'm creating a new array and I'm not manipulating the existing array. Whereas if I look at Version B, it appears like I'm adding the trucks array to the cars array, and it doesn't seem obvious to me that the cars array isn't being changed. But, maybe that's just me. I'd be curious to know what you think?

Since I don't really have a substantial reason besides aesthetics, I think you and your team should stick with whatever you choose πŸ‘

Difference between Spread vs Concat

I prefer using spread, because I find it more concise and easier to write. BUT, there are still benefits of using concat.

Spread is fantastic when you know beforehand that you're dealing with arrays. But what happens when the source is something else, like a string. And you want to add that string to the array. Let's walk through an example.

Example: Dealing with an arbitrary argument

Let's say this is the outcome we want:

[1,2,3,'random']

A. Using Spread

And if we follow the pattern we've been using and used the spread operator. Here's what happens:

function combineArray(array1, array2) {
  return [...array1, ...array2];
}

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

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

☝️ If we spread our string, it will split the word into separate letters. So it doesn't achieve the result we want.

B. Using Concat

BUT, if we follow the concat pattern that we've been doing. Here's what happens:

function combineArray(array1, array2) {
  return [].concat(array1, array2);
}

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

combineArray(isArray, notArray);
// βœ…  [ 1, 2, 3, 'random' ]

☝️ Excellent! We get the result we want.

I know some of you are like, duh! I'll just write some conditional to make sure what I'm passing is an array and execute accordingly. Sure that'd work too. Or just write less code and use concat and be done with πŸ˜‚

Verdict

So here's the quick rule. If you know you're dealing with arrays, use spread. But if you might be dealing with the possibility with a non-array, then use concat to merge an array πŸ‘

Anyways I just want to point that out, so you can use the most appropriate method depending on the problem you're trying to solve πŸ‘

Merge Array with Push πŸ€”

Some of you are asking, hey, can't I also use push to merge an array. And yes, you sure can! But when you use push, it manipulates or changes the existing array. It does NOT create a new array. So depending on what you're trying to do. Make sure you keep that in mind.

const cars = ['πŸš—', 'πŸš™'];
const trucks = ['🚚', 'πŸš›'];

const combined = cars.push(...trucks);

console.log(combined); // 4
// ☝when you use push, it returns the LENGTH of the combined array

console.log(cars); // [ 'πŸš—', 'πŸš™', '🚚', 'πŸš›' ]
console.log(trucks); // ['🚚', 'πŸš›']

Also, when you're trying to push an array to another array. You will need to spread it, otherwise, you will end up getting a nested array. Of course, unless that's what you wanted 😜

const cars = ['πŸš—', 'πŸš™'];
const trucks = ['🚚', 'πŸš›'];

cars.push(trucks);
// 😱 cars: [ 'πŸš—', 'πŸš™', [ '🚚', 'πŸš›' ] ]

cars.push(...trucks);
// βœ… cars: [ 'πŸš—', 'πŸš™', '🚚', 'πŸš›' ]

Browser Support

Spread was introduced in ES6, so all modern browser supports it. Except for the "I'm too cool" Internet Explorer - no support there πŸ˜•. So if you need IE support, you want to use concat instead or use a compiler like Babel.

Resources


Thanks for reading ❀
Say Hello! Instagram | Twitter | Facebook | Medium | Blog

Posted on Jul 15 '19 by:

samanthaming profile

Samantha Ming

@samanthaming

Frontend Developer sharing weekly JS, HTML, CSS code tidbits πŸ”₯Discover them all on samanthaming.com πŸ’›

Discussion

markdown guide
 

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])
 

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...

 

nice, thanks for sharing that πŸ‘

 

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
 

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

 

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.

 

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 πŸ€”

 

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

 

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.

 

Ahhhh my mistake 😱 Thank you for letting me know πŸ‘

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

I like spread parameters :)

Thanks.

 

Same here! But that’s some crazy nesting you have there πŸ˜‚

 

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

 

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

 

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

 

Awesome, glad you found it helpful πŸ™‚πŸ‘

 

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/.

 

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

 

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