How to join two arrays of objects into one with JavaScript

Image for post
Image for post

Joining two arrays may sound like an easy task yet looking, for example, at this StackOverflow question and the number of answers (let’s note that none was accepted up to this day!) it may cause a bit of headache.

While we can use external libraries to join arrays, we can simply rely on plain JavaScript. In this article we are going to look how to do it with plain JS and also with the newer ES6 syntax.

First of all let’s define the problem.

We have two arrays abc and def. We want to join them together into one, single array with all the elements present:

const abc = ['a', 'b', 'c'];
const def = ['d', 'e', 'f'];
// expected result: ['a', 'b', 'c', 'd', 'e', 'f']

Plain JavaScript

We can achieve that easily with plain javascript and Array.prototype.concat() method:

const result = abc.concat(def);
console.log(result);
// outputs: ['a', 'b', 'c', 'd', 'e', 'f']

Let’s try the same with array of objects:

const a = [{id: 1}, {id: 2}];
const b = [{id: 3}, {id: 4}];
// expected result: [{id: 1}, {id: 2}, {id: 3}, {id: 4}]
const result = a.concat(b);
console.log(result);
// outputs: [{id: 1}, {id: 2}, {id: 3}, {id: 4}]

All works fine. Therefore, where is the catch?

We must remember that concat doesn’t modify existing arrays. It returns a new array instead. Let’s compare it to Array.prototype.push() method:

const aggregator = [];
const abcdef = [{id: 'abc'}, {id: 'def'}];
aggregator.push(abcdef);console.log(aggregator);
// outputs nested array: [[{id: 'abc'}, {id: 'def'}]]

We have got a nested array back. If we simply replace push() with concat() we will get “unexpected” result at the first sight:

const aggregator = [];
const abcdef = [{id: 'abc'}, {id: 'def'}];
aggregator.concat(abcdef);console.log(aggregator);
// outputs empty array: []

This is because concat() didn’t modify existing aggregator array and we simply outputted content of aggregator which is empty array [].

In order to fix this “issue” we need to store the new array returned by concat():

const result = aggregator.concat(abcdef);
console.log(result);
// outputs: [{id: 'abc'}, {id: 'def'}]

Result is exactly the way we want it to be!

Doing the same thing ES6 way

To join two arrays, we can achieve the same results by using newer ES6 syntax and spread operator:

const abc = ['a', 'b', 'c'];
const def = ['d', 'e', 'f'];
const result = [...abc, ...def];
console.log(result);
// outputs: ['a', 'b', 'c', 'd', 'e', 'f']

Now, let’s try array of objects:

const a = [{id: 1}, {id: 2}];
const b = [{id: 3}, {id: 4}];
const result = [...a, ...b];
console.log(result);
// outputs: [{id: 1}, {id: 2}, {id: 3}, {id: 4}]

All worked okay!

Conclusions

To join two arrays we don’t need any external libraries or packages. Plain JavaScript gives us concat() method that works fine. Moreover, we can join two arrays using spread operator and ES6 syntax.

Programming, project management and politics

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store