How to merge properties of two JavaScript objects dynamically

Overview

In JavaScript, we can merge the properties of two objects dynamically using the following approaches.

  • Spread (...) operator
  • Object.assign() method

Using the spread (...) operator

We can merge the properties of two objects using the spread operator as below:

Syntax

const obj3 = {

    ...obj1, 

    ...obj2

}
Syntax of Spread Operator

Example 1

// creating object 1
const obj1 = {
  name: 'Shubham'
}
// creating object 2
const obj2 = {
  designation: 'Software Engineer'
}
// merging obj1 and obj2
const obj3 = {
  ...obj1,
  ...obj2
}
// printing obj3 on console
console.log(obj3);

Explanation

  • Lines 2–4: We create an object obj1.
  • Lines 7–9: We create another object obj2.
  • Lines 12–15: We merge the properties of obj1 and obj2 using the spread operator and store them in the object obj3.
  • Line 18: We print obj3 on the console.

Note: If both the objects have a similar key then the value of the key of the object that appeared last is used.

Using the Object.assign()method

We can merge the properties of two objects using the Object.assign() method as below:

Syntax

const obj3 = Object.assign(obj1, obj2);
Syntax of Spread Operator

Example 2

// creating object 1
const obj1 = {
  name: 'Shubham'
}
// creating object 2
const obj2 = {
  designation: 'Software Engineer'
}
// merging obj1 and obj2
const obj3 = Object.assign(obj1, obj2);
// printing obj3 on console
console.log(obj3);

Explanation

  • Lines 2-4: We create an object obj1.
  • Lines 7-9: We create another object obj2.
  • Line 12: We merge the properties of obj1 and obj2 using the Object.assign() method and store them in the object obj3.
  • Line 15: We print obj3 on the console.

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
You TubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)