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
  • Shallow Merging
    • Using Spread Operator { … }
    • Using Object.assign() Method
  • Deep Merging
    • Using Lodash.merge() Method
• Merging Arrays Inside Objects
• Conclusion

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.

This collection focuses on Backend development strategies and SQL optimization techniques.-

Make A Div Fill The Height Of The Remaining Screen Space – Discover how to use make a div fill the height of the remaining screen space in this blog.

Maintain The Aspect Ratio Of A Div With Css – Discover how to use maintain the aspect ratio of a div with css in this blog.

How To Center Absolutely Positioned Element In Div Using Css – Discover how to use how to center absolutely positioned element in div using css in this blog.

Automatic Semicolon Insertion In Javascript – Discover how to use automatic semicolon insertion in javascript in this blog.

Css Grid To Horizontally Center Element – Discover how to use css grid to horizontally center element in this blog.

Css Margin 0 Auto To Horizontally Center Element – Discover how to use css margin 0 auto to horizontally center element in this blog.

Are Non Void Self Closing Tags Valid In Html5 – Discover how to use are non void self closing tags valid in html5 in this blog.

Css Masonry Layout – Discover how to use css masonry layout in this blog.

Html Computer Code Elements – Discover how to use html computer code elements in this blog.

How to Merge Two Objects In JavaScript – FAQs