How to Merge Arrays or Arrays of Objects in JavaScript

Here are multiple ways to join array of objects. First, let us see how to use different techniques to merge multiple arrays in JavaScript.

The Spread syntax (…)

If you would like to use all the elements of an array of objects to be included in a list use Spread syntax to combine two or more arrays. Introduced in ES6, this is helpful in creating new array literals.

Lets see how to use spread syntax with set.

Set is an in-built collection, it does not accommodate duplicates, unlike concat. Therefore, this is more useful when you would like to build a collection of arrays minus duplicates.

let array1 = ['1','2','3']
let array2 = ['3','3','4','5'];
let array3 = [];
array3 = [...new Set([...array1,...array2])];

How to use spread syntax with push method

We will see next how to use push syntax separately. But, for now, let’s see how to combine Spread syntax with the push method.

let array1 = [1,2,3,4,5];
let array2 = [6,7,8,9,10];
let array3 = [];
array3.push(...array1, ...array2);

How to use spread syntax with Array.of()

The Array.of() method creates a new Array instance from the arguments.

let array1 = [1,2,3,4]
let array2 = [5,6,7,8];
let array3 = Array.of(...array2, ...array1);

Merge array or merge objects with the reduce() method

The reduce() function, reduces the entire Array into a single value, by executing the function provided by us.

let array1 = [1,2,3,4];
let array2 = [5,6,7,8];

let array3 = array2.reduce((accumulator, currentValue) => {
          array1.push(currentValue);
          return array1;
}, array2);

OR

let array1 = [1,2,3,4];
let array2 = [5,6,7,8];
let array3 = array2.reduce(function (accumulator, currentValue) {
          array1.push(currentValue);
          return array1;
}, array2 );

There are various parameters associated with reduce method. This document explains very well how it works.

Merge array or merge objects with the concat() method

The concat() method will combine two or more arrays to produce the third array.

let array1 = [1, 2, 3];
let array2 = ['d', 'e', 'f'];
let array3 = array1.concat(array2);

Merge array or merge objects with the push() Method

The Push() method, generally is used to append the item to the end of an array and not really “combine array” like those methods as seen earlier. The general way to add elements to an array is as follows:

let array1 = [1, 2, 3, 4];
array1.push(5, 6, 7, 8);

The workaround to combine two arrays with push(), is to use apply() method. The apply() method calls a function with a given value and arguments provided as an array (or an array-like object ).

let array1 = [1,2,3,4];
let array2 = [5,6,7,8];

Array.prototype.push.apply(array1 , array2 );

console.log(array1);

Merge array or merge objects with the for() Loop

Let’s see the common way to combine two arrays using for loop in javascript

function combine(sourceArray, destinationArray) {
     for(let i = 0, len = sourceArray.length; i < len; i++) {
            destinationArray.push(sourceArray[i]);
     }
      return destinationArray;
}

let array1 = [1,2,3,4];
let array2= [5,6,7,8];
let array3 = [];
combine(array1, array3);
combine(array2, array3);

If you would like to specify any other methods, feel free to help others by commenting below.