How to merge multiple arrays in javascript using concat method or spread operator.

How to merge multiple arrays in javascript using concat method or spread operator.

How to merge multiple arrays in javascript using concat method or spread operator.

When you want to merge two or more arrays, there are following three ways that you can use.

  1. concat method
  2. spread operator.
  3. merge array using push and unshift

1. concat method

concat method is used to merge two or more array and it doesn’t alter any existing array but it returns a new array.

1. merging two arrays

<br />var array1= ["A", "B", "C"];<br /><br />var array2= ["X", "Y", "Z"];<br /><br />var combined= array1.concat(array2);<br /><br />console.log(combined);<br />//OUTPUT: ["A", "B", "C", "X", "Y", "Z"]<br /><br />// OR you can use this way as well.<br /><br />combined= [].concat(array1, array2);<br /><br />console.log(combined);<br />//OUTPUT: ["A", "B", "C", "X", "Y", "Z"]<br /><br />

2. merging three arrays

When you want to merge more than two arrays, you can pass multiple parameters to concat method as following:

<br />var array1= ["A", "B", "C"];<br /><br />var array2= ["X", "Y", "Z"];<br /><br />var array3= ["1", "2", "3"];<br /><br />var combined= array1.concat(array2, array3);<br /><br />console.log(combined);<br />//OUTPUT: ["A", "B", "C", "X", "Y", "Z", "1", "2", "3"]<br /><br />

3. merging values to the array

You can also merge the value to the array instead of passing array to the concat method.

<br />var array1= ["A", "B", "C"];<br /><br />var combined= array1.concat(1);<br /><br />console.log(combined);<br />//OUTPUT: ["A", "B", "C", 1]<br /><br />combined= array1.concat(1, 2, 3);<br /><br />console.log(combined);<br />//OUTPUT: ["A", "B", "C", 1, 2, 3]<br /><br />combined= array1.concat(1, [2, 3]);<br /><br />console.log(combined);<br />//OUTPUT: ["A", "B", "C", 1, 2, 3]<br /><br />

As you can see in the above code, we have passed a value as an argument and in the last example, we’ve passed value and array to the concat method.

4. merging arrays as a nested array

If you want to merge the array as a nested array, you’ll need to pass arrays inside the array to the concat method as following:

<br />var array1= ["A", "B", "C"];<br /><br />var array2= ["X", "Y", "Z"];<br /><br />var array3= ["1", "2", "3"];<br /><br />var combined= array1.concat([array2, array3]);<br /><br />console.log(combined);<br />//OUTPUT: &nbsp;["A", "B", "C", Array(3), Array(3)]<br /><br />

Here in the above code, you can see the [array2, array3] is passed to concat method.

Actual Output:

2. spread operator

Spread operator was introduced in ES6. so it supports all modern browsers. but it doesn’t support a browser like IE. If you need to support IE, you can use concat method.
<br />var array1= [1, 2, 3];<br /><br />var array2= ["X", "Y", "Z"];<br /><br />var combined= [...array1, ...array2];<br /><br />console.log(combined);<br />//OUTPUT: [1, 2, 3, "X", "Y", "Z"]<br /><br />

Spread is a nice operator but you would only use the spread syntax in the array literal if the additional elements that are always part of the array are known before. but if one of the sources is a string, it would cause the following problem.

<br />var array1= [1, 2, 3];<br /><br />var str= 'ELITE-CORNER';<br /><br />var combined= [...array1, ...array2];<br /><br />console.log(combined);<br />//OUTPUT: [1, 2, 3, "E", "L", "I", "T", "E", "-", "C", "O", "R", "N", "E", "R"]<br /><br />

If you’ll look at the above output, you’ll see the string "ELITE-CORNER" is spread but that’s not we were expecting, right?

but what we were expecting is the below result:

<br />  //OUTPUT: [1, 2, 3, "ELITE-CORNER"]<br />

That’s because sperad operator will spread what the value is passed if the type of value is array it will spread out each item but if the type is string it will split that string into separate letters.

That’s why we need to be careful while using spread operator and only use it if you’re sure that both sources are the type of array.

combine array at any point of another array

In some case, you might want to combine two arrays and want to place elements at any point within an array. you can do it using sperad operator using following syntax:

<br />var array1= [1, 2, 3];<br /><br />var array2= ["X", ...array1, "Y", "Z"];<br /><br />console.log(combined);<br />//OUTPUT: ["X", 1, 2, 3, "Y", "Z"]<br /><br />

3. Merge array using push and unshift

You can also merge array using push and unshift.

When you are merging array using push and unshift, it won’t create a new array like concat and sperad operators are doing. but it will alter or change an existing array.

<br />var array1= [1, 2, 3];<br /><br />var array2= ["X", "Y", "Z"];<br /><br />array1.push(...array2)<br />console.log(combined);<br />//OUTPUT: ["X","Y", "Z", 1, 2, 3];<br /><br />array1.unshift(...array2)<br />console.log(combined);<br />//OUTPUT: [1, 2, 3, "X","Y", "Z"];<br /><br />

As you can see in the above code,
the first statement
array1.push(...array2) adds array2 items to the end of the array1
and the second statement
array1.unshift(...array2) will add the array2 items to the beginning of an array1.

Also Read:

Leave a Comment