in

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.

vlet 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
} */
Enter fullscreen mode

Exit fullscreen mode

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
 }

 */
Enter fullscreen mode

Exit fullscreen mode

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"
    }

*/
Enter fullscreen mode

Exit fullscreen mode

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
 }

 */
Enter fullscreen mode

Exit fullscreen mode



Merge objects using Loadash

Loadash 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 Loadash _.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?





Source: https://dev.to/amersikira/how-to-merge-objects-in-javascript-5704

Leave a Reply

Your email address will not be published. Required fields are marked *

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

GIPHY App Key not set. Please check settings

Efsanestar Music bot with python

Cn466 midterm frontend using vue.js