Open In App

ES6 Merge Objects

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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


Last Updated : 22 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads