How to Merge Objects in JavaScript?

Merging two or more objects is a common task in JavaScript, whether you’re working with an API or managing states in front-end applications. JavaScript provides various ways to merge objects. In this blog, we will explore object merging and various methods to merge objects in JavaScript.

Table of Contents:

Understanding Object Merging In JavaScript

Object merging is the process of combining two or more objects into a new object. It can be categorized into two types:

1. Shallow Merging
2. Deep Merging

JavaScript provides various ways to achieve both types of merges. Let’s explore each of them one by one:

Shallow Merging

Shallow merging is useful when you have to merge flat objects (objects that don’t contain nested objects). There are two ways to perform shallow merging:

Using Spread Operator { … }

Spread Operator { … } is a built-in operator in JavaScript. It is a modern and concise way to merge objects. It creates a new object and copies all properties from the original object to the new object.

Example:

Output:

Explanation: In this example, there are two objects. One is obj1, which contains name and year properties. The other object is obj2, which contains name and course properties. Both of these objects are merged with the spread operator {…}, and new objects with all combined properties are created.

Important Note:

• Merging objects with the use of a spread operator creates a new object.
• If properties are the same in both objects, then values from the last object overwrite the previous one.

Using Object.assign() Method

Object.assign() is another way to merge objects in JavaScript. It copies the properties from one or more source objects to a target object.

Example:

Output:

Explanation: In this example, the Object.assign() method is used to merge two objects. Here, in Object.assign({}, obj1, obj2), the first object ( {} ) is the target object rest of them ( obj1, obj2 ) are source objects.

Important Note:

• Similar to the spread operator, if both objects have the same properties, then properties from the last object overwrite the previous object’s properties.

Deep Merging

Shallow merging cannot work if the object contains a nested object (an object inside another object). For merging these kinds of objects, you have to perform deep merging by using the Lodash library of JavaScript.

Using Lodash.merge() Method

Lodash is a modern JavaScript utility library that provides a merge() function to perform deep merging in JavaScript.

Example:

Output:

Explanation: .merge() method recursively merges all properties completely. You have to first require lodash to use its .merge() method.

Merging Arrays Inside Objects

By default, the Lodash merge() method doesn’t concatenate arrays. But if you have an object that contains an array inside it, then for merging those objects, you have to use the mergeWith() method.

Example:

Output:

Explanation: .merge() alone would overwrite the numbers array instead of merging it. Thus mergeWith() method is used to merge an object that contains an array inside it.

Conclusion

Merging objects in JavaScript can be done in various ways, like using the spread operator { … } or Object.assign() method for shallow merging and for deep merging Lodash library is used widely.
To learn more about JavaScript and practice interview questions, follow our JavaScript Interview Questions sheet, which is prepared by industry experts.

How to Merge Two Objects In JavaScript – FAQs