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.
How to use spread operator in JavaScript
let array1 = [1,2,3];
let array2 = [4,5,6];
let array3 = [];
array3= […array1, …array2];
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.
