In JavaScript, merging two or more objects is a common task when working with complex data structures or when combining the properties of multiple objects. The process of merging objects involves combining the properties of multiple objects into a single object.

There are several ways to merge objects in JavaScript, but one common approach is to use the Object.assign() method. This method allows you to merge multiple objects into a target object.

Using Object.assign()

The Object.assign() method takes a target object as the first argument and one or more source objects as the subsequent arguments. It merges the properties of the source objects into the target object.

Here’s an example usage of Object.assign():

const target = { foo: 1 };
const source = { bar: 2 };
const mergedObject = Object.assign(target, source);

console.log(mergedObject); // { foo: 1, bar: 2 }

In this example, we have a target object with a property foo and a source object with a property bar. By using Object.assign(), we merge the properties of the source object into the target object, resulting in a merged object with both foo and bar properties.

Deep Merging

By default, Object.assign() performs a shallow merge, where only the top-level properties of the source objects are merged. If the properties are objects themselves, they are not deeply merged.

To perform a deep merge, where nested objects are recursively merged, you can use third-party libraries like Lodash or write your own custom merging function.

Here’s an example of a deep merge implementation using recursion:

function deepMerge(target, ...sources) {
  if (!sources.length) {
    return target;
  }
  
  const source = sources.shift();

  if (typeof target !== 'object' || typeof source !== 'object') {
    return target;
  }

  for (const key in source) {
    if (source.hasOwnProperty(key)) {
      if (typeof source[key] === 'object') {
        if (!target[key]) {
          Object.assign(target, { [key]: {} });
        }
        deepMerge(target[key], source[key]);
      } else {
        Object.assign(target, { [key]: source[key] });
      }
    }
  }

  return deepMerge(target, ...sources);
}

const target = { foo: { bar: 1 } };
const source = { foo: { baz: 2 } };
const mergedObject = deepMerge(target, source);

console.log(mergedObject); // { foo: { bar: 1, baz: 2 } }

This custom deepMerge() function recursively merges the properties of the source objects into the target object, including nested objects. It handles cases where the target or source properties are not objects by simply ignoring them.

Conclusion

Merging objects in JavaScript is a useful technique when working with complex data structures. The Object.assign() method provides a simple way to merge objects, while third-party libraries or custom functions can be used for deep merging.

Remember to consider whether you need a shallow or deep merge based on your requirements. By mastering the art of object merging, you’ll have more flexibility and control over manipulating data in JavaScript.