How to merge objects in javascript
Tags: 250daysofjsquestions, learnersbucket, javascript, webdev
Published: 2022-05-02 10:50:45

---
title: How to merge objects in javascript
published: true
description: Learn how to merge two or more objects in javascript. Create a custom function which will perform the shallow and deep merge on objects and arrays.
tags: 250DaysOfJSQuestions, learnersbucket, javascript, webdev
canonical_url: https://learnersbucket.com/examples/interview/how-to-merge-objects-in-javascript/
//cover_image: https://direct_url_to_image.jpg
---

>This is a series of #250DaysOfJSQuestions that I had started on twitter where I share one JavaScript interview question daily, follow me on twitter [@learnersbucket](https://twitter.com/LearnersBucket) for web dev and interview related content.

**Question 1**. Learn how to merge two or more [objects](https://learnersbucket.com/tutorials/data-structures/javascript-objects-complete-reference) 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](https://learnersbucket.com/tutorials/es6/es6-intro) 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](https://learnersbucket.com/tutorials/es6/spread-and-rest-operators-in-javascript) operator

`...` spread operators copies all the properties of the objects into another object.

```javascript
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()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/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.

```javascript
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.

```javascript
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.

```javascript
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.

```javascript
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()](https://api.jquery.com/jQuery.extend/#jQuery-extend-target-object1-objectN) method

`$.extend(deep, copyTo, copyFrom)` can be used to make a complete deep copy of any array or object in javascript.

### Lodash [merge()](https://www.npmjs.com/package/lodash.merge) method

which will merge objects and arrays by performing deep merge recursively.