How to Merge Properties of Two JavaScript Objects Dynamically

An object in JavaScript is described as a group of key-value pairs. Sometimes, developers may require combining the properties of the two objects in a new object. This process is called merging. For merging objects, JavaScript provides some built-in methods called the “Object.assign()” method or the “Spread operator”.

This post will describe the methods to dynamically merge the properties of two JavaScript objects.

How to Merge Properties of Two JavaScript Objects Dynamically?

Use the following methods to dynamically merge the properties of two JavaScript objects:

assign() method
Spread operator

Method 1: Merge/Combine Properties of Two JavaScript Objects Dynamically Using Object.assign() Method

Use the “Object.assign()” method to dynamically combine the properties of two JavaScript objects. This method maintains the original objects’ integrity by copying all enumerable properties to a target object from one or more source objects. If the same attribute is present in both objects, the second object’s value will replace the value from the first. Note that this method only copies enumerable properties, so it will not copy properties inherited from the object’s prototype.

Syntax

Follow the provided syntax for merging two JavaScript objects:

targetObject = Object.assign(obj1, obj2, ...);

Example

Create an object “info”:

var info = {
name: 'Jenny',
age: 24,
Rollno: 15
};

Create second object “activities” with the following key-pairs:

var activities = {
game: 'Cricket',
exercise: 'Yoga'
};

Call the “Object.assign()” method to merge the properties of the “info” and “activities” in a new object called “student”:

var student = Object.assign(info, activities);

Print the properties of object “student” using the “console.log()” method:

console.log(student);

The output indicates that the properties of objects “info” and “activities” are successfully merged in the new object “student”:

Method 2: Merge/Combine Properties of Two JavaScript Objects Dynamically Using Spread Operator

There is another approach to merge the two JavaScript objects, which is using the “Spread operator”. It is the commonly utilized approach for merging objects by copying all attributes from objects. If two objects have a property with the same name, the object property on the right replaces the earlier one.

Syntax

The following syntax is used for merging properties of two JavaScript objects with the help of the Spread operator:

targetObject = Object.assign(...obj1, ...obj2, ....);

Example

Create a new object “student” and merge the properties of objects “info” and “activities” in student using Spread operator “…”:

var student = {
...info, ...activities
};

Output

We have provided all the necessary information related to merging the objects in JavaScript.

Conclusion

To merge/combine the properties of objects in JavaScript, use the “Object.assign()” method or the “Spread operator”. The spread operator is the most commonly used approach for merging the properties of JavaScript objects. If the same attribute is present in both objects, the second object’s value will replace the value from the first. In this post, we described the methods to dynamically merge/combine the properties of two JavaScript objects.

How to Merge Properties of Two JavaScript Objects Dynamically