How to use JS to dynamically merge the properties of two objects

Author: Abhilash Kakumanu
Translator: Frontend Xiaozhi
Source: stackak

There are dreams and dry goods. WeChat search [Moving to the World] Follow this brushing wit who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.

We can use the spread operator ( ... ) to merge different objects into one object, which is also the most common operation for merging two or more objects.

This is an immutable method of merging two objects, that is, the initial two objects used for merging will not change in any way due to side effects. Finally, we get a new object, which is constructed from these two objects, and they remain intact.

We create two objects and merge them:

const person = {
    name: "前端小智",
    age: 24
}
const job = {
    title: "前端开发",
    location: "厦门"
}

const employee = {...person, ...job};

console.log(employee);

operation result:

{ 
  name: '前端小智', 
  age: 24, 
  title: '前端开发', 
  location: '厦门' 
}

Note: If there are common attributes between these two objects, for example, they both have location , the attributes of the second object ( job ) will override the attributes of the first object ( person ):

const person = {
  name: "前端小智",
  location: "北京"
}
const job = {
  title: "前端开发",
  location: "厦门"
}

const employee = {...person, ...job};

console.log(employee);

operation result:

{ 
  name: '前端小智', 
  location: '厦门', 
  title: '前端开发' 
}

If you want to merge more than two objects, the object on the far right will overwrite the object on the left.

Use Object.assign() merge JavaScript objects

Object.assign() two or more objects is to use the built-in 0609dc4922874f method:

Object.assign(target, source1, source2, ...);

This method copies all attributes in one or more source objects to the target object. Just like the spread operator, when overwriting, the rightmost value will be used:

const person = {
  name: "前端小智",
  location: "北京",
};
const job = {
  title: "前端开发",
  location: "厦门",
};

const employee = Object.assign(person, job);
console.log(employee);

operation result:

{ 
  name: '前端小智', 
  age: 24,
  location: '厦门', 
  title: '前端开发' 
}

Also, please remember that employee is a brand new object and will not be linked to the object referenced by person or job

Shallow merge and deep merge

In the case of shallow merge, if one of the attributes on the source object is another object, the target object will contain a reference to the same object that exists in the source object. In this case, no new objects will be created.

We adjust the previous person object and use location as the object itself

const person = {
    name: "John Doe",
    location: {
        city: "London", 
        country: "England"
    }
}
const job = {
    title: "Full stack developer"
}

const employee = {...person, ...job};

console.log(employee.location === person.location);

operation result:

true

We can see that the references to the location person and employee objects are the same. In fact, the spread operator ( ... ) and Object.assign() are shallow merges.

JavaScript does not have deep merge support out of the box. However, third-party modules and libraries do support it, such as Lodash's .merge .

to sum up

In this article, we demonstrate how to merge two objects in JS. The spread operator ( ... ) and Object.assign() methods are introduced, both of which perform shallow merging of two or more objects into a new object without affecting the components.

~End, I’m Shuwanzhi, I’m going to clean the dishes, see you next time!

---

possible bugs after the 1609dc4922892b code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time was spent on log debugging. By the way, I would like to recommend a useful BUG monitoring tool Fundebug .

Original: https://stackak.com/merge-properties-of-two-objects-dynamically-in-javascript/

communicate with

There are dreams and dry goods. WeChat search World] pays attention to this brushing wit who is still doing dishes in the early morning.

This article GitHub https://github.com/qq449245884/xiaozhi has been included, the first-line interview complete test site, information and my series of articles.