JavaScript How to merge properties of different objects into a new object

In JavaScript, you can merge properties of different objects into a new object using various methods. Below are some common approaches to do this:

1. Using Object.assign()

The Object.assign() method copies all enumerable properties from one or more source objects to a target object. It creates a shallow merge, meaning nested objects are still referenced rather than cloned.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObj = Object.assign({}, obj1, obj2);

console.log(mergedObj); // { a: 1, b: 3, c: 4 }

In the above example, b from obj2 overwrites b from obj1 because obj2 is merged last.

2. Using Spread Syntax { ...obj1, ...obj2 }

The spread operator (...) can also be used to merge multiple objects into a new object. This method is concise and also creates a shallow merge.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); // { a: 1, b: 3, c: 4 }

Similar to Object.assign(), properties from later objects (like obj2) will overwrite properties from earlier objects (like obj1).

3. Using Object.assign() with Multiple Objects

You can merge more than two objects by passing multiple source objects to Object.assign().

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

const mergedObj = Object.assign({}, obj1, obj2, obj3);

console.log(mergedObj); // { a: 1, b: 2, c: 3 }

4. Using Array.prototype.reduce() for Merging Arrays of Objects

If you need to merge a list of objects, reduce() can be used to accumulate the objects into a single merged object.

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

const objects = [obj1, obj2, obj3];

const mergedObj = objects.reduce((acc, obj) => {
  return { ...acc, ...obj };
}, {});

console.log(mergedObj); // { a: 1, b: 2, c: 3 }

5. Using Lodash _.merge() for Deep Merging

For deep merging, where nested objects are merged instead of being replaced, you can use the _.merge() method from Lodash.

const _ = require('lodash');

const obj1 = { a: 1, b: { x: 10 } };
const obj2 = { b: { y: 20 }, c: 3 };

const mergedObj = _.merge({}, obj1, obj2);

console.log(mergedObj); // { a: 1, b: { x: 10, y: 20 }, c: 3 }

6. Using Object.entries() with reduce() for Merging Objects Dynamically

If you want more control over merging or need to apply custom logic, you can convert objects to entries and merge them manually.

const obj1 = { a: 1 };
const obj2 = { b: 2 };
const obj3 = { c: 3 };

const mergedObj = [obj1, obj2, obj3].reduce((acc, obj) => {
  Object.entries(obj).forEach(([key, value]) => {
    acc[key] = value;
  });
  return acc;
}, {});

console.log(mergedObj); // { a: 1, b: 2, c: 3 }

Summary

• Shallow Merge: Use Object.assign() or the spread operator ({ ...obj1, ...obj2 }).
• Deep Merge: Use _.merge() from Lodash.
• Merging Multiple Objects: You can pass multiple objects to Object.assign() or use reduce() to merge an array of objects.

For most common use cases where shallow merging is sufficient, Object.assign() or the spread operator are quick and easy solutions. For deep merging, _.merge() (from Lodash) is a reliable option.