How to merge the properties and methods of two objects in JavaScript?
Tags: javascript
Published: 2021-12-02 00:00:00

---
  title: How to merge the properties and methods of two objects in JavaScript?
  published: true
  tags: JavaScript
  date: Thu Dec 02 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/merge-properties-methods-of-two-objects-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-10c5bd725836f37eb6b7193d936976dc.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/merge-properties-methods-of-two-objects-javascript)
  
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

```js
// 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,

```js
// 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,

```js
// 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,

```js
// 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,

```js
// 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,

```js
// 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](https://jsbin.com/deluhowame/4/edit?js,console).

That's all 😃!

### Feel free to share if you found this useful 😃.

---