2 Ways to Merge Different Objects in JavaScript

Method 1: Use Object.assign method

The Object.assign method can merge two different objects in javascript. By using this built-in Object.assign method, you can merge more than two objects as well. It will return a new object. 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 method?

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 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 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 JavasSript also allows you to merge two or more 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 most efficient way is to use object destructuring which is simpler than Object.assign method.

Latest articles

Related articles

Leave a reply

Please enter your comment!
Please enter your name here