Learn how to merge two or more objects in JavaScript.
learnersbucket.com
I run a blog named learnersbucket.com where I write about ES6, Data structures, and Algorithms to help others crack coding interviews. Follow me on Twitter for regular updates.
Almost everything in JavaScript is object, but still it does not have any good methods to merge two or more different objects.
After ES6 there are new methods added which can be used to merge objects in JavaScript.
There are two different types of merge that can be performed on the objects. 1). Shallow merge 2). Deep merge
Shallow Merge objects
In shallow merge only the properties owned by the object will be merged, it will not merge the extended properties or methods.
Using … spread operator
… spread operators copies all the properties of the objects into another object.
let obj1 = { name: ‘prashant’, age: 23,}let obj2 = { qualification: ‘BSC CS’, loves: ‘Javascript’}let merge = {…obj1, …obj2};console.log(merge);/*Object { age: 23, loves: “Javascript”, name: “prashant”, qualification: “BSC CS”}*/
Using Object.assign() method
Object.assign(target, source1, soure2, …) method copies all the enumerable own property of source object to target object and returns the target object.
let obj1 = { name: ‘prashant’, age: 23,}let obj2 = { qualification: ‘BSC CS’, loves: ‘Javascript’}let merge = Object.assign({}, obj1, obj2);;console.log(merge);/*Object { age: 23, loves: “Javascript”, name: “prashant”, qualification: “BSC CS”}*/
We have used an empty object {} as a target and passed the sources objects which should be merged in target.
Using custom function to merge objects
We can also create custom function to merge two or more objects.
let merge = (…arguments) => { // Create a new object let target = {}; // Merge the object into the target object let merger = (obj) => { for (let prop in obj) { if (obj.hasOwnProperty(prop)) { // Push each value from `obj` into `target` target[prop] = obj[prop]; } } }; // Loop through each object and conduct a merge for (let i = 0; i < arguments.length; i++) { merger(arguments[i]); } return target;}let obj1 = { name: ‘prashant’, age: 23,}let obj2 = { qualification: ‘BSC CS’, loves: ‘Javascript’}let merged = merge(obj1, obj2);;console.log(merged);/*Object { age: 23, loves: “Javascript”, name: “prashant”, qualification: “BSC CS”}*/
Deep Merge Objects
To deep merge an object we have to copy the own properties and extended properties as well, if it exits.
The best way to do so is to create a custom function.
let merge = (…arguments) => { let target = {}; // Merge the object into the target object let merger = (obj) => { for (let prop in obj) { if (obj.hasOwnProperty(prop)) { if (Object.prototype.toString.call(obj[prop]) === ‘[object Object]’){ // If we’re doing a deep merge // and the property is an object target[prop] = merge(target[prop], obj[prop]); } else { // Otherwise, do a regular merge target[prop] = obj[prop]; } } } }; //Loop through each object and conduct a merge for (let i = 0; i < arguments.length; i++) { merger(arguments[i]); } return target;};let obj1 = { name: ‘prashant’, age: 23, nature: { “helping”: true, “shy”: false }}let obj2 = { qualification: ‘BSC CS’, loves: ‘Javascript’, nature: { “angry”: false, “shy”: true }}console.log(merge(obj1, obj2));/*Object { age: 23, loves: “Javascript”, name: “prashant”, nature: Object { angry: false, helping: true, shy: true }, qualification: “BSC CS”}*/
We can combine both the function for shallow copy and deep copy together to create a single function which will perform merge based on the arguments passed.
If we will pass true as first argument then it will perform deep merge else it will perform shallow merge.
let merge = (…arguments) => { // Variables let target = {}; let deep = false; let i = 0; // Check if a deep merge if (typeof (arguments[0]) === ‘boolean’) { deep = arguments[0]; i++; } // Merge the object into the target object let merger = (obj) => { for (let prop in obj) { if (obj.hasOwnProperty(prop)) { if (deep && Object.prototype.toString.call(obj[prop]) === ‘[object Object]’) { // If we’re doing a deep merge // and the property is an object target[prop] = merge(target[prop], obj[prop]); } else { // Otherwise, do a regular merge target[prop] = obj[prop]; } } } }; //Loop through each object and conduct a merge for (; i < arguments.length; i++) { merger(arguments[i]); } return target;};let obj1 = { name: ‘prashant’, age: 23, nature: { “helping”: true, “shy”: false }}let obj2 = { qualification: ‘BSC CS’, loves: ‘Javascript’, nature: { “angry”: false, “shy”: true }}//Shallow mergeconsole.log(merge(obj1, obj2));/*Object { age: 23, loves: “Javascript”, name: “prashant”, nature: Object { angry: false, shy: true }, qualification: “BSC CS”}*///Deep mergeconsole.log(merge(true, obj1, obj2));/*Object { age: 23, loves: “Javascript”, name: “prashant”, nature: Object { angry: false, helping: true, shy: true }, qualification: “BSC CS”}*/
There are other libraries available which you can use to merge or two objects like
Jquery?s $.extend() method
$.extend(deep, copyTo, copyFrom) can be used to make a complete deep copy of any array or object in javascript.
Lodash merge() method
which will merge objects and arrays by performing deep merge recursively.
Originally published at https://learnersbucket.com on June 6, 2019.
