How to merge two or more objects into one object in Javascript?

Here, in this article we will learn how to merge two or more objects into one object containing both their properties using JavaScript.

To merge objects and create a new object which has all the properties of the merged object, we have two ways to do it.

1. Using the Object.assign() method
2. Using ES6 spread operator (...)

Merge objects using Object.assign() method

The Object.assign() methods copies all enumerable and its own properties from one or more source to its target object.

Syntax:

Object.assign(target, ...source1, source2, ...)

Here, we will use Object.assign() method to merge person and academy objects into a student object using JavaScript.

Lets see the following example below to understand it better.

let person = {
    name: 'John',
    age: 25,
    gender: 'Male'
};

let academy = {
    subject: 'English',
    marks: 80
};

let student = Object.assign(person, academy);

console.log(student)

OUTPUT:

{
  name: 'John',
  age: 25,
  gender: 'Male',
  subject: 'English',
  marks: 80
}

Now , we can see student object contains property of both person object and academy object.

IMPORTANT : It is important to note that the properties of the first object i.e person object is also change because it act as the target object in the Object.assign() method.

Merge objects using ES6 spread (...) operator.

ES6 has introduced the spread operators (...) which can perform the same operation as Object.assign() method but in a very simple and easy way.

The spread operator merges two or more objects and creates a new object which contains all the properties of the merged objects.

Syntax:

{...object1,...object2, ...object3,...}

So taking the same example as above, we can merge both person and academy object into student object with both merged objects properties using spread operator (...) in JavaScript.

let person = {
    name: 'John',
    age: 25,
    gender: 'Male'
};

let academy = {
    subject: 'English',
    marks: 80
};

let student = {...person, ...academy}

console.log(student)

OUTPUT :

{
  name: 'John',
  age: 25,
  gender: 'Male',
  subject: 'English',
  marks: 80
}

IMPORTANT: By using the spread operator (...) , the properties of the first object i.e person object does not change.

So, it would be best to use the spread operator (...) if you don't want to change the properties of the source objects while merging them into one JavaScript object.

It is also important to know that in both the above methods, if both the source objects contain same properties name then the right-most object's property will overwrite the previous one.

To understand it lets see the example.

let object1 = { name: "alex", gender: "Male", city: "New York" }
let object2 = { occupation : "doctor", age: 30, city: "Chicago"}

let employee = { ...object1, ...object2 }

console.log(employee)

OUTPUT:

{
  name: 'alex',
  gender: 'Male',
  city: 'Chicago',
  occupation: 'doctor',
  age: 30
}

As, you can see in the out put the city name is overwritten to "Chicago" by the right-most object i.e object2 from the example.