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

📋 Table Of Content
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.
- Using the Object.assign() method
- 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 theObject.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.eperson
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.
Recent Post
- Line continuation | Long statement in Multiple lines in Python
- Find Length of Dictionary in Python with Examples
- Reverse an Array in Python (Using Numpy And Array Module)
- Python import from parent directory
- How to use Pi in Python? (math and numpy module)
- FileNotFoundError: No such file or directory Error Python