Deep Merge Objects

Introduction

In this lab, we will explore the concept of deep merging two objects in JavaScript. We will create a function that can take two objects and merge them in a way that allows us to handle keys present in both objects using a custom function. By the end of this lab, you will be able to merge complex objects and combine their values using a custom function.

Skills Graph

How to Deep Merge Objects in JavaScript

To deeply merge two objects in JavaScript, you can use the deepMerge function. This function takes two objects and a function as arguments. The function is used to handle keys present in both objects.

Here's how the deepMerge function works:

1. Use Object.keys() to get the keys of both objects, create a Set from them and use the spread operator (...) to create an array of all the unique keys.
2. Use Array.prototype.reduce() to add each unique key to the object, using fn to combine the values of the two given objects.

Here's the code for the deepMerge function:

const deepMerge = (a, b, fn) =>
  [...new Set([...Object.keys(a), ...Object.keys(b)])].reduce(
    (acc, key) => ({ ...acc, [key]: fn(key, a[key], b[key]) }),
    {}
  );

To use the deepMerge function, call it with two objects and a function. Here's an example:

deepMerge(
  { a: true, b: { c: [1, 2, 3] } },
  { a: false, b: { d: [1, 2, 3] } },
  (key, a, b) => (key === "a" ? a && b : Object.assign({}, a, b))
);
// { a: false, b: { c: [ 1, 2, 3 ], d: [ 1, 2, 3 ] } }

In this example, the deepMerge function is used to merge two objects. The resulting object has the values of both objects merged together.

Summary

Congratulations! You have completed the Deep Merge Objects lab. You can practice more labs in LabEx to improve your skills.