How to combine multiple objects in JavaScript

In JavaScript you can merge multiple objects in a variety of ways. The most commonly used methods are the spread operator ... and the Object.assign() function.

How to copy objects with the spread operator

To begin with, we will use the spread operator for this task, as it is the most efficient method. Let's start with the following objects:

const brand1 = {'a': 'Fiat', 'b': 'Seat'};  
const brand2 = {'c': 'Renault'};  
const brand3 = {'d': 'Ford'};

The spread operator is represented by three dots ... and is used to separate the elements inside the objects. To join the objects into one we would have to do the following:

const finalBrand = {...brand1, ...brand1, ...brand1};

a: Fiat  
b: Seat  
c: Renault  
d: Ford

The finalBrand object we have obtained is a new object created with copies of the other objects, so we can modify the objects marks1, marks2 and marks3 without fear that this one will be affected.

However, if objects are included inside the objects marks1, marks2 or marks3, copies of these objects will not be created, but their reference will be copied. That is, the spread operator ... operator will only create copies of the top-level elements.

How to copy objects with Object.assign()

Another possible way to copy objects is to use the Object.assign() function, which will copy all properties from one object to another. In case the object you copy elements to already contains properties, the copied properties will be added to these and, in case they have the same name, the new ones will always be given priority.

Here is an example:

const brand1 = { a: 'Nissan', b: 'Fiat' };  
const brand2 = { b: 'Mercedes', c: 'Ford' };    
Object.assign(brand1, brand2);

If we now do a console.log of the mark1 object, we will get the following:

a: Nissan  
b: Mercedes  
c: Ford

As you can see, the b property of the object we copied, whose value is Mercerces, has priority.

And that's it.