How to Merge Two Objects in Javascript

How to merge two objects in javascript
How to merge two objects in javascript

2 simple ways to merge two objects in javascript

Method 1: Use Object.assign() method

Don’t you know about Object.assign method? You can merge two different objects in javascript by using the built-in Object.assign method. It will return a new object after merging two different objects. Here is an example.

The above code will show the following as output.

Object { name: “john”, age: 34, profession: “Software Developer”, Experience: “2 Years” }

Please note that the Object.assign method also changes the first object passed as a parameter. Here is the code and output to demonstrate that.

This will print the same output as the above code. Here is the output.

Object { name: “john”, age: 34, profession: “Software Developer”, Experience: “2 Years” }

How to merge more than two objects with Object.assign()

You can merge as many objects as you want with the Object.assign method. Here is a simple example where three objects are merged to make a single object. As mentioned above that it will also change the first object passed as a parameter.

The output of the above code is

Object { name: “john”, age: 34, profession: “Software Developer”, Experience: “2 Years”, username: “Test”, repositories: 32 } 

Object { name: “john”, age: 34, profession: “Software Developer”, Experience: “2 Years”, username: “Test”, repositories: 32 }

Merging two objects with the same keys

If you merge two or more than two objects that have the same keys. All the keys in the next object(s) passed as parameters will overwrite the keys of the previous object(s). Let’s see an example.

The output of the above code is Object { a: 1, b: 2, c: 3 }

Method 2: Use object destructuring to merge two objects

The latest feature “destructuring” in javascript also allows you to merge two or more than two objects. This is even simpler than the previous method. Here is a simple example of object destructuring.

The above code will print the following as output.

Object { name: “john”, age: 34, profession: “Software Developer”, Experience: “2 Years”, username: “Test”, repositories: 32 }

This method doesn’t change the original objects that are used to create a new object. Let’s see it in action.

Output :

Object { name: “john”, age: 34 } 

Object { profession: “Software Developer”, Experience: “2 Years” } 

Object { username: “Test”, repositories: 32 }

Now, you can ask yourself a question. Will this method overwrite the objects having the same keys? To answer this question you have to check the following example.

Output : Object { a: 1, b: 2, c: 3 }

Yes! it does overwrite the object keys with the keys used in the other objects.

Conclusion

There are two simple ways to merge two or more different objects in javascript. The first way is to use a built-in javascript method Object.assign. This method also changes the first object passed as a parameter. The second and efficient way is to use object destructuring which is simpler than object.assign method.

LEAVE A REPLY

Please enter your comment!
Please enter your name here