Implement a deepMerge function

May 03, 2024

In JavaScript, merging typically refers to combining two or more objects or arrays into a single object or array. This process is commonly used when you want to consolidate data from multiple sources or update an object with new properties.

1. Basic implementation

We have to implement a deepMerge() utility function which can merge nested objects and arrays. If same keys exist on both objects and hold a primitive value, simply return the value from second object as the final result.

import isPojo from './src/utils.js';

function deepMerge(valA, valB) {
  // handling arrays
  if (Array.isArray(valA) && Array.isArray(valB)) {
    return [...valA, ...valB];
  }

  // objects
  if (isPojo(valA) && isPojo(valB)) {
    const mergedObj = { ...valA };
    for (const key in valB) {
      if (Object.hasOwn(valB, key)) {
        if (key in valA) {
          mergedObj[key] = deepMerge(valA[key], valB[key]);
        } else {
          mergedObj[key] = valB[key];
        }
      }
    }
    return mergedObj;
  }

  // other values
  return valB;
}

// Usage
const output1 = deepMerge({ a: 1 }, 2);
/**
 * Yields: 2
 */
console.log(output1);

const output2 = deepMerge({ a: 1 }, { a: 2, b: 3 });
/**
 * Yields:
 * {
    "a": 2,
    "b": 3
  }
 */
console.log(output2);

const output3 = deepMerge({ a: 1, b: [2, 3, 4] }, { a: 2, b: [5, 6], c: { d: [1, 2, 3] } });
/**
 * Yields:
 * {
    "a": 2,
    "b": [
        2,
        3,
        4,
        5,
        6
    ],
    "c": {
        "d": [
            1,
            2,
            3
        ]
    }
}
 */
console.log(output3);

In the above implementation , I have used a utility called isPojo(), which essentially checks if the given value is a Plain Old JavaScript Object or not. You can learn more about it’s implementation in the deepEqual function implementation from the Recursion Questions for Frontend Interviews blog series.