To merge the properties and methods of two objects or one object with another object, you can use the object spread
(...
) operator in JavaScript.
TL;DR
// object personalDetails
const personalDetails = {
name: "John Doe",
age: 23,
};
// object workDetails
const workDetails = {
salary: 45000,
joinedDate: "3rd September 2020",
};
// Object to hold all the properties and methods
// from 'personalDetails' and `workDetails` object.
// Also using object spread operator on both the objects
// to spread all the properties and methods from it.
const allDetails = { ...personalDetails, ...workDetails };
// log the output of `allDetails` object
console.log(allDetails);
/*
OUTPUT:
-------
{
name: "John Doe",
age: 23,
salary: 45000,
joinedDate: "3rd September 2020"
}
*/
For example, let's say we have an object called personalDetails
with properties of name
and age
like this,
// object personalDetails
const personalDetails = {
name: "John Doe",
age: 23,
};
Let's also consider another object called workDetails
with the property names of salary
and joinedDate
like this,
// object personalDetails
const personalDetails = {
name: "John Doe",
age: 23,
};
// object workDetails
const workDetails = {
salary: 45000,
joinedDate: "3rd September 2020",
};
Now to merge the properties and methods of the above two objects of personalDetails
and workDetails
into a single object we can use the object spread
(...
) operator on both the objects inside a new object.
So first let's create a new object called allDetails
to hold all the properties and methods from the personalDetails
and workDetails
objects.
It can be done like this,
// object personalDetails
const personalDetails = {
name: "John Doe",
age: 23,
};
// object workDetails
const workDetails = {
salary: 45000,
joinedDate: "3rd September 2020",
};
// Object to hold all the properties and methods
// from 'personalDetails' and `workDetails` object.
const allDetails = {};
After making the new object, we can now use the object spread
operator (...
) on both the personalDetails
and the workDetails
objects inside the new object allDetails
to spread all the properties and methods onto the new object.
It can be done like this,
// object personalDetails
const personalDetails = {
name: "John Doe",
age: 23,
};
// object workDetails
const workDetails = {
salary: 45000,
joinedDate: "3rd September 2020",
};
// Object to hold all the properties and methods
// from 'personalDetails' and `workDetails` object.
// Also using object spread operator on both the objects
// to spread all the properties and methods from it.
const allDetails = { ...personalDetails, ...workDetails };
Now if we log the output of the allDetails
object to the console we can see that all the properties and methods from both the two objects of personalDetails
and workDetails
are merged into the new object of allDetails
.
It may look like this,
// object personalDetails
const personalDetails = {
name: "John Doe",
age: 23,
};
// object workDetails
const workDetails = {
salary: 45000,
joinedDate: "3rd September 2020",
};
// Object to hold all the properties and methods
// from 'personalDetails' and `workDetails` object.
// Also using object spread operator on both the objects
// to spread all the properties and methods from it.
const allDetails = { ...personalDetails, ...workDetails };
// log the output of `allDetails` object
console.log(allDetails);
/*
OUTPUT:
-------
{
name: "John Doe",
salary: 45000,
age: 23,
joinedDate: "3rd September 2020"
}
*/
See the above code live in JSBin.
That's all π!
Top comments (0)