Merge properties of two or more objects in JavaScript
This post will discuss how to merge the properties of two or more objects in JavaScript.
1. Using Spread Operator
A simple solution is to use the Spread operator to expand the properties of the specified objects into literal objects (ES2018). Here’s a working example:
|
1 2 3 4 5 6 7 8 9 |
var obj1 = { name: 'John', age: 20 }; var obj2 = { city: 'New York' }; var object = { ...obj1, ...obj2 }; console.log(object); /* Output: { name: 'John', age: 20, city: 'New York' } */ |
The solution returns a new array object and can be easily extended to merge any number of objects.
Note that the properties of the subsequent objects will completely overwrite the properties of former objects with the same key. This is true for the following solutions as well.
2. Using Object.assign() function
The Object.assign() method copies all properties from one or more source objects to a target object and returns the target object. You can use this as:
|
1 2 3 4 5 6 7 8 9 |
var obj1 = { name: 'John', age: 20 }; var obj2 = { city: 'New York' }; Object.assign(obj1, obj2); console.log(obj1); /* Output: { name: 'John', age: 20, city: 'New York' } */ |
The Object.assign() method can accept an arbitrary number of objects. To avoid modifying the original objects, pass an empty object as the target:
|
1 2 3 4 5 6 7 8 9 |
var obj1 = { name: 'John', age: 20 }; var obj2 = { city: 'New York' }; var object = Object.assign({}, obj1, obj2); console.log(object); /* Output: { name: 'John', age: 20, city: 'New York' } */ |
3. Using jQuery
With jQuery, you can use the $.extend() method, which copies all properties from the specified object to the target object and return the target object.
|
1 2 3 4 5 6 7 8 9 |
var obj1 = { name: 'John', age: 20 }; var obj2 = { city: 'New York' }; $.extend(obj1, obj2); console.log(obj1); /* Output: { name: 'John', age: 20, city: 'New York' } */ |
The $.extend() method can merge an arbitrary number of objects. If the first argument to $.extend is true, the method performs a deep copy. To get a new object without modifying the original object, pass an empty object as the target:
|
1 2 3 4 5 6 7 8 9 |
var obj1 = { name: 'John', age: 20 }; var obj2 = { city: 'New York' }; var object = $.extend({}, obj1, obj2); console.log(object); /* Output: { name: 'John', age: 20, city: 'New York' } */ |
4. Using Underscore/Lodash Library
If you’re already using the Underscore or Lodash library, another good alternative is to use the _.extend method. It copies all the source object’s properties to the destination object and returns the destination object.
|
1 2 3 4 5 6 7 8 9 |
var obj1 = { name: 'John', age: 20 }; var obj2 = { city: 'New York' }; _.extend(obj1, obj2); console.log(obj1); /* Output: { name: 'John', age: 20, city: 'New York' } */ |
Like Object.assign() and $.extend(), it can accept any number of arguments. To get a new object without modifying the original objects, pass an empty object as the target.
|
1 2 3 4 5 6 7 8 9 |
var obj1 = { name: 'John', age: 20 }; var obj2 = { city: 'New York' }; var object = _.extend({}, obj1, obj2); console.log(object); /* Output: { name: 'John', age: 20, city: 'New York' } */ |
With Lodash, you can also use the _.merge() method that works similarly:
|
1 2 3 4 5 6 7 8 9 |
var obj1 = { name: 'John', age: 20 }; var obj2 = { city: 'New York' }; _.merge(obj1, obj2); console.log(obj1); /* Output: { name: 'John', age: 20, city: 'New York' } */ |
That’s all about merging properties of two or more objects in JavaScript.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)