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 😃!