How to merge objects in JavaScript?

This article was originally published on webinuse.com

This is the third article in the series. We already wrote Object manipulation in JavaScript and How to check if a 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

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.

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.

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: 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.

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.

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 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.

If you have any questions or anything you can find me on my Twitter, or you can read some of my other articles like Object manipulation in JavaScript?

Comments

[fgkolf]

Thanks for this nice post!

An important note on this subject that i believe you should mention, is the difference on the 2 approaches regarding the mutation of the targeted object.
In your first 2 examples (using spread operator), none of the merged object is mutated (user, address).
In the next 2 examples (Object.assign), the first object (target) of the Object.assign is mutated and will end up being equivalent to the result of Object.assign.
Some times this may be acceptable but in order to provide an example that is equivalent in both approaches you should demonstrate the use of Object.assign with the target being an empty object:

Object.assign({}, user, address);

This is equivalent to

{...user, ...address}

You should also rename Loadash to Lodash :)

[Amer Sikira]

Thank you for pointing those things out. I didn' t think about that. Really excellent observation!

I've changed Loadash to Lodash, btw. :D