How to merge objects in JavaScript?
Tags: javascript, tutorial, webdev, beginners
Published: 2021-10-09 16:27:43

*This article was originally published on [webinuse.com](https://webinuse.com/how-to-merge-objects-in-javascript/)*

This is the third article in the series. We already wrote [Object manipulation in JavaScript](https://webinuse.com/object-manipulation-in-javascript/) and [How to check if a JavaScript object is empty](https://webinuse.com/how-to-check-if-javascript-object-is-empty/)? Often, when working with data we need to do some manipulation. Today we are going to learn how to merge objects in JavaScript, using built-in functions.

We can merge objects in JavaScript by using some of the following methods:

1.  Spread operator (`...`)
2.  Using built-in method `Object.assign()`
3.  Using some of the JS libraries like [Loadash](https://www.npmjs.com/package/lodash.merge)

### Merge objects using spread operator

ES6 introduced a Spread operator (`...`) which is excellent for merging two or more objects into one. Spread operator (`...`) creates a new object with properties of the merged objects.

```javascript
let user = {
    name: "John", 
    surname: "Doe",
    age: 30
}
 
let address = {
    city: "London",
    street: "Baker Street",
    number: 225
}
 
let info = {...user, ...address};
 
console.log(info);
 
//Result: 
/*
{
   name: 'John', 
   surname: 'Doe', 
   age: 30, city: 'London', 
   street: 'Baker Street', 
   number: 225
} */
```

In the example above we have merged two objects user and address into info. As we can see it is successfully merged.

But there is a catch. If there are two same properties in different objects then the property from the most right objects rewrites every property that came before.

```javascript
let user = {
    name: "John", 
    surname: "Doe",
    age: 30,
    city: "Dallas"
}
 
let address = {
    city: "London",
    street: "Baker Street",
    number: 225
}
 
let info = {...user, ...address};
 
console.log(info);
 
//Result: 
 
/**
 {
        name: "John", 
        surname: "Doe",
        age: 30,
        city: "London",
        street: "Baker Street",
        number: 225
 }
 
 */
```

As we can see in the example `user` object had property `city` with the value of “Dallas”. When we merged `user` with `address`, property `city` from `address` overwrote previous value of “Dallas” with “London”.

### Merge using Object.assign()

According to [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign): `The Object.assign()` method copies all enumerable own properties from one or more source objects to a target object. It returns the modified target object.

```javascript
let item = {
    id: 123,
    name: "JavaScript Tutorial",
    price: 500,
    author: "John Doe"
}
 
let category = {
    category_id: 1,
    category_name: "Tutorials"
}
 
let shop = Object.assign(item, category);
 
console.log(shop);
 
//Result: 
 
/*
    {
        id: 123,
        name: "JavaScript Tutorial",
        price: 500,
        author: "John Doe",
        category_id: 1,
        category_name: "Tutorials"
    }
 
*/
```

However, Same as with spread operator (`...`), `Object.assign()` properties are overwritten from left to right.

```javascript

let user = {
    name: "John", 
    surname: "Doe",
    age: 30,
    city: "Dallas"
}
 
let address = {
    city: "London",
    street: "Baker Street",
    number: 225
}
 
let info = Object.assign(user, address);
 
console.log(info);
 
//Result: 
 
/**
 {
        name: "John", 
        surname: "Doe",
        age: 30,
        city: "London",
        street: "Baker Street",
        number: 225
 }
 
 */
```

### Merge objects using Lodash

[Lodash](https://lodash.com/) is a modern JavaScript utility library delivering modularity, performance & extras. This method recursively merges the own and inherited enumerable string keyed properties of source objects into the destination object. It performs deep merge by recursively merging object properties and arrays. For more information visit [Lodash _.merge documentation](https://lodash.com/docs/4.17.15#merge).

If you have any questions or anything you can find me on my [Twitter](https://twitter.com/AmerSikira), or you can read some of my other articles like [Object manipulation in JavaScript?](https://webinuse.com/object-manipulation-in-javascript/)