How to merge objects in javascript

Learn how to merge two or more objects in javascript.

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) => {

  // Variables
  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 merge
console.log(merge(obj1, obj2));

/*
Object {
  age: 23,
  loves: "Javascript",
  name: "prashant",
  nature: Object {
    angry: false,
    shy: true
  },
  qualification: "BSC CS"
}
*/

//Deep merge
console.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.