Combining Arrays in JavaScript

In this post let’s study about different methods of combining two or more arrays.

1. Using Concat() method

The concat() method is used to join two or more arrays.
This method does not change the existing arrays, but returns a new array, containing the values of the joined arrays.
Let’s see how to code this.

let firstArray = [1, 3, 'Mango',5, 7, 'Apple']
let secondArray = [2, 4, 6, 8, 10]
let combinedArray1 = firstArray.concat(secondArray)
let combinedArray2 = secondArray.concat(firstArray)
console.log(`Combined Array1 = ` + combinedArray1)
console.log(`Combined Array2 = ` + combinedArray2)

The console output of above code is below.

Another way to use concat is by concating two or more arrays in an empty array

let firstArray = [1, 3, 'Mango',5, 7, 'Apple']
let secondArray = [2, 4, 6, 8, 10]
let thirdArray = ['John',55,'Smith']
let combinedArray = [].concat(firstArray,secondArray,thirdArray)
console.log(`Combined Array = ` + combinedArray)

The console output of above code is below.

2.Using spread operator

Spread syntax allows an iterable such as an array expression or string to be expanded in places where zero or more arguments (for function calls) or elements (for array literals) are expected, or an object expression to be expanded in places where zero or more key-value pairs (for object literals) are expected.
We just have to store the values of two or more arrays in a different array using …(three dots) or spread operator, it is only available in ES6 version only. We can use spread operator with push / Array.of.

let firstArray = [1, 3, 'Mango',5, 7, 'Apple']
let secondArray = [2, 4, 6, 8, 10]
let thirdArray = ['John',55,'Smith']
let combinedArray = [...firstArray,...secondArray, ...thirdArray]
console.log(`Combined Array = ` + combinedArray)

The console output of above code is below.

3. Using Push/Unshift Method

We can also use the push method to combine different arrays like as shown. First, declare an empty array and then use the push() method with the spread operator. The contents of the arrays will be copied in the desired arrayWhen 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.

let firstArray = [1, 3, 'Mango',5, 7, 'Apple']
let secondArray = [2, 4, 6, 8, 10]
let thirdArray = ['John',55,'Smith']
let combinedArray = []
combinedArray.push(...firstArray, ...secondArray,...thirdArray);
console.log(`Combined Array = ` + combinedArray)

The console output of above code is below.

var array1= [1, 2, 3];
var array2= [11,12,13];
var array3=[1,2,3];
var array4=[11,12,13]
array1.push(...array2);
array3.unshift(...array4);
console.log(`Push method = ` +array1);
console.log(`Unshift method = ` +array3);

array1.push(...array2) adds array2 items to the end of the array1
and the second statement
array3.unshift(...array4) will add the array4 items to the beginning of an array3.

The console output of the above code is below.

4. Using Array.of Method

The Array.of() method creates a new Array instance from a variable number of arguments, regardless of number or type of the arguments.

let firstArray = [1, 3, 'Mango',5, 7, 'Apple']
let secondArray = [2, 4, 6, 8, 10]
let thirdArray = ['John',55,'Smith']
let combinedArray = Array.of(...firstArray, ...secondArray,...thirdArray);
console.log(`Combined Array = ` + combinedArray)

The console output of above code is below.

5. Using Reduce Method

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value.

var array1 = [1, 2, 3, 4, 5]
var array2 = [6, 7, 8, 9, 10]
var array3 = array2.reduce((newArray, item) => {
newArray.push(item)
return newArray
}, array1)
console.log(`Combined Array = ` + array1)

The console output of above code is below.