How to Merge Two Objects in JavaScript

In JavaScript, merging two objects involves combining their properties into a single object. This can be useful when you want to combine configuration objects, extend objects with additional properties, or merge data from different sources. In this guide, we’ll look at different ways to merge objects in JavaScript.

1. Using the Spread Operator (...)

The spread operator is the simplest and most modern way to merge two or more objects. It creates a new object by spreading the properties of the source objects into the target object.

Example:

const employee1 = {
  firstName: "Ramesh",
  lastName: "Fadatare"
};

const employee2 = {
  email: "ramesh.fadatare@gmail.com",
  department: "Engineering"
};

const mergedEmployee = { ...employee1, ...employee2 };

console.log(mergedEmployee);

Output:

{
  firstName: "Ramesh",
  lastName: "Fadatare",
  email: "ramesh.fadatare@gmail.com",
  department: "Engineering"
}

Note:

• If both objects have the same property, the property in the object added later will overwrite the previous one.

Example of Overwriting:

const employee1 = {
  firstName: "Ramesh",
  email: "old.email@example.com"
};

const employee2 = {
  email: "new.email@example.com"
};

const mergedEmployee = { ...employee1, ...employee2 };

console.log(mergedEmployee); // Output: { firstName: "Ramesh", email: "new.email@example.com" }

2. Using Object.assign()

The Object.assign() method copies the properties of one or more source objects to a target object. This method modifies the target object and returns it.

Example:

const employee1 = {
  firstName: "Ramesh",
  lastName: "Fadatare"
};

const employee2 = {
  email: "ramesh.fadatare@gmail.com",
  department: "Engineering"
};

const mergedEmployee = Object.assign({}, employee1, employee2);

console.log(mergedEmployee);

Output:

{
  firstName: "Ramesh",
  lastName: "Fadatare",
  email: "ramesh.fadatare@gmail.com",
  department: "Engineering"
}

Note:

• Like the spread operator, if there are overlapping properties, the last object’s property will overwrite the earlier ones.
• Object.assign() mutates the target object. In this example, the target object is an empty object {} to avoid modifying the original objects.

3. Merging Multiple Objects

Both the spread operator and Object.assign() can merge more than two objects. Simply list the objects you want to merge.

Example using Spread Operator:

const employee1 = { firstName: "Ramesh" };
const employee2 = { lastName: "Fadatare" };
const employee3 = { email: "ramesh.fadatare@gmail.com", department: "Engineering" };

const mergedEmployee = { ...employee1, ...employee2, ...employee3 };

console.log(mergedEmployee);

Example using Object.assign():

const employee1 = { firstName: "Ramesh" };
const employee2 = { lastName: "Fadatare" };
const employee3 = { email: "ramesh.fadatare@gmail.com", department: "Engineering" };

const mergedEmployee = Object.assign({}, employee1, employee2, employee3);

console.log(mergedEmployee);

Output for Both:

{
  firstName: "Ramesh",
  lastName: "Fadatare",
  email: "ramesh.fadatare@gmail.com",
  department: "Engineering"
}

4. Deep Merging

Both the spread operator and Object.assign() perform shallow merges, meaning they only copy properties at the first level. If the object has nested objects, only references to those nested objects are copied, not their contents.

For deep merging, where you want to merge nested objects as well, you can either manually merge properties or use libraries like Lodash.

Example using a Simple Manual Deep Merge:

const employee1 = {
  name: {
    firstName: "Ramesh",
    lastName: "Fadatare"
  },
  contact: {
    email: "ramesh.fadatare@gmail.com"
  }
};

const employee2 = {
  contact: {
    phone: "123-456-7890"
  }
};

// Merging contact details manually
const mergedEmployee = {
  ...employee1,
  contact: { ...employee1.contact, ...employee2.contact }
};

console.log(mergedEmployee);

Output:

{
  name: { firstName: "Ramesh", lastName: "Fadatare" },
  contact: { email: "ramesh.fadatare@gmail.com", phone: "123-456-7890" }
}

Conclusion

Merging objects in JavaScript can be done using modern methods like the spread operator or Object.assign(). Both are effective for shallow merges, but if you need to deeply merge nested objects, you'll need to handle that manually or use external libraries.