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.
|
1 2 3 4 5 6 7 8 9 10 11 |
const personalInformation = { name: "john", age : 34}; const perfessionalInformation = { profession: "Software Developer", Experience: "2 Years" }; const completeInformation = Object.assign(personalInformation, perfessionalInformation); console.log(completeInformation); // output: { name: "john", age: 34, profession: "Software Developer", Experience: "2 Years" } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
const personalInformation = { name: "john", age : 34, }; const perfessionalInformation = { profession: "Software Developer",Experience: "2 Years" }; Object.assign(personalInformation, perfessionalInformation); console.log(personalInformation); //output: Object { name: "john", age: 34, profession: "Software Developer", Experience: "2 Years" } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
const personalInformation = { name: "john", age : 34, }; const perfessionalInformation = { profession: "Software Developer", Experience: "2 Years" }; const githubInformation = { username: "Test", repositories : 32, }; const completeInformation = Object.assign(personalInformation, perfessionalInformation , githubInformation); console.log(personalInformation); // output: { name: "john", age: 34, profession: "Software Developer", Experience: "2 Years", username: "Test", repositories: 32 } console.log(completeInformation); // outpue: { name: "john", age: 34, profession: "Software Developer", Experience: "2 Years", username: "Test", repositories: 32 } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
const o1 = { a: 1, b: 1, c: 1 }; const o2 = { b: 2, c: 2 }; const o3 = { c: 3 }; const obj = Object.assign(o1, o2, o3); console.log(obj); // <em>Object { a: 1, b: 2, c: 3 }</em> |
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.
|
1 2 3 4 5 6 7 8 9 |
const personalInformation = { name: "john", age : 34, }; const perfessionalInformation = { profession: "Software Developer", Experience: "2 Years" }; const githubInformation = { username: "Test", repositories : 32, }; const completeInformation = {...personalInformation, ...perfessionalInformation, ...githubInformation}; console.log(completeInformation); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const personalInformation = { name: "john", age : 34, }; const perfessionalInformation = { profession: "Software Developer", Experience: "2 Years" }; const githubInformation = { username: "Test", repositories : 32, }; const completeInformation = {...personalInformation, ...perfessionalInformation, ...githubInformation}; console.log(personalInformation); // Object { name: "john", age: 34 } console.log(perfessionalInformation); // <em>Object { profession: "Software Developer", Experience: "2 Years" }</em> console.log(githubInformation); // <em>Object { username: "Test", repositories: 32 }</em> |
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.
|
1 2 3 4 5 6 7 8 9 |
const o1 = { a: 1, b: 1, c: 1 }; const o2 = { b: 2, c: 2 }; const o3 = { c: 3 }; const o4 = {...o1, ...o2, ...o3} console.log(o4); // output: Object { a: 1, b: 2, c: 3 } |
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.