Here are 2 ways to combine your arrays and return a NEW array. I like using the spread operator. But if you need to support older browsers, go for concat instead.
// 2 ways to merge arrays
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
// Method 1: Concat
const combined1 = [].concat(fruits, legumes);
// Method 2: Spread
const combined2 = [...fruits, ...legumes];
// Result
// [ 'pomme', 'poire', 'carotte', 'salade' ]An alternative concat syntax
You can also write the concat syntax like this:
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.concat(legumes);
// [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(fruits); // ['pomme ', 'poire'];
console.log(legumes); // ['carotte ', 'salade'];
As you can see, this way of writing it neither touches nor changes the existing array.
Which one should I pick?
Let us put both versions side by side so you can compare them.
// Version A:
const combinedA = [].concat(fruits, legumes);
// Version B:
const combinedB = fruits.concat(legumes);
So the question now is which one to pick. I prefer version A, because I find the intent far clearer. Just by looking at it, I know I am creating a new array and not touching the existing one. Whereas with version B, it looks like I am appending legumes to the fruits array, and it is not obvious to me that the fruits array could be replaced by the legumes.
The difference between spread and concat
I prefer spread because I find it shorter and easier to write. BUT there are still cases where concat wins.
Spread is great when you know up front that you are dealing with arrays. But what happens when the source is something else, a string for instance, and you want to append that string to the array? Let us take an example.
Example
Say this is the result we want:
[1, 2, 3, 'random'];
A. Using spread
If we follow the pattern we used earlier and reach for the spread operator, here is 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' ]
Spreading a string splits the word into separate letters. So it does not give us the result we were after.
B. Using concat
BUT if we follow the concat pattern instead, here is 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' ]
There we go. That is exactly the result we wanted.
I know some of you are thinking “come on”. I will just write a conditional to make sure what I pass is an array and run it accordingly. Of course that works too. Or you write less code and use concat.
Verdict
So here is the quick rule. If you know you are dealing with arrays, use spread. But if there is any chance you are dealing with something other than an array, use concat to merge
Either way, I just wanted to point it out, so you can pick whichever method fits the problem you are trying to solve.
Merging arrays with push
Some of you are wondering whether you could use push to merge an array too. And yes, you can! But push touches and changes the existing array. It does NOT create a new one. So it depends on what you are trying to do. Keep that in mind.
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
const combined = fruits.push(...legumes);
console.log(combined); // 4
// when you use push, it returns the LENGTH of the combined array
console.log(fruits); // [ 'pomme', 'poire', 'carotte', 'salade' ]
console.log(legumes); // ['carotte', 'salade']
Also, when you try to push an array into another array, you have to spread it, otherwise you end up with a nested array. Unless of course that is what you wanted
const fruits = ['pomme ', 'poire'];
const legumes = ['carotte ', 'salade'];
cars.push(legumes);
// fruits: [ 'pomme ', 'poire', ['carotte ', 'salade'] ]
cars.push(...legumes);
// fruits: [ 'pomme ', 'poire', 'carotte ', 'salade' ]
Browser support
Spread landed in ES6, so every modern browser supports it. Otherwise use concat instead, or run a compiler such as Babel.
