In this article, we are going to learn how to merge two objects in JavaScript.
We can merge two JavaScript Objects in ES6 by using the two popular methods. The methods are listed below:
Using Object.assign() method: Using this method, we can merge two or more objects into one object. Object.assign() method makes a copy of a new object after copying all properties from source objects and then return that object.
Syntax:
Object.assign(target, Object1, Object2, ...)
Example 1: In this example, we have taken two objects ‘obj1’ and ‘obj2’, and then passed them into object.assign() as an argument and stored them in ‘Object’ after merging. After that, we printed all keys and values of a merged object using the for-of-loop and document.write() function.
javascript
<script> // An Object var obj1 = {1 : "Geeks", 2: "for"}; var obj2 = { 3 : "Geeks"}; // Using Object.assign() Object.assign(obj1, obj2); // Printing object for (var key of Object.keys(obj1)) { console.log(key + " => " + obj1[key]) }</script> |
Output:
1 => Geeks 2 => for 3 => Geeks
Example 2: In this example, we are going to see how Object.assign() function handled the same properties in objects
Javascript
<script> let gfg_courses = { CIP:7000, DSA:2500, Data_Science:4500, Web_Dev:8900 }; let gfg_live = { Frontend:9000, Backend:9500, FullStack:11000, Web_Dev:9000 }; // Using Object.assign() let gfg = Object.assign(gfg_courses, gfg_live); // Printing object for (var key of Object.keys(gfg)) { console.log(key + " => " + gfg[key]) }</script> |
Output: In the above code we have merged two objects ‘gfg_courses’ and ‘gfg_live’ into ‘gfg’ object and printed all keys and values. In the output, we can see that when objects have the same properties then the preference is given to the later-defined object.
CIP => 7000 DSA => 2500 Data_Science => 4500 Web_Dev => 9000 Frontend => 9000 Backend => 9500 FullStack => 11000
Using spread(…) operator: In this method, we are going to use the spread (…) operator to merge two or more objects.
Syntax:
var objClone = { ...Object1, ...Object2};
Example: In this example, we have followed the same procedure as same in the previous example but instead of using object.assign() function we have used the spread operator to merge the objects and then print their key and values. This is to be noted that when two objects have the same properties then they will perform the same as in the above method.
javascript
<script> // An Object var obj1 = {1 : "Geeks", 2: "for"}; var obj2 = { 3 : "Geeks"}; // Using Object spread syntax var obj = {...obj1, ...obj2}; // Printing object for (var key of Object.keys(obj)) { console.log(key + " => " + obj[key]) }</script> |
Output:
1 => Geeks 2 => for 3 => Geeks
