How to Deep Compare Two Objects in JavaScript

Deep comparing two objects in JavaScript is crucial for various tasks, from state management in frameworks to ensuring data consistency. Unlike primitive data types, a simple equality check (== or ===) won’t suffice for objects, as they compare references, not content. This article explores five effective techniques to perform deep comparisons, empowering you to choose the best approach for your specific needs.

Understanding Object Equality in JavaScript

Before diving into techniques, it’s essential to distinguish between two types of object equality:

• Referential Equality: Checks if two variables point to the same memory location (same object instance). This is what ==, ===, and Object.is() do.
• Deep Equality: Checks if two objects have the same properties and values, recursively comparing nested objects and arrays.

While referential equality is straightforward, deep equality requires more sophisticated methods.

1. Manual Deep Comparison with Recursion

The most fundamental approach involves iterating through each property of both objects and comparing their values. For nested objects, the process repeats recursively.

const isDeepEqual = (obj1, obj2) => {
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) return false;

  for (let key of keys1) {
    const val1 = obj1[key];
    const val2 = obj2[key];

    const areObjects = typeof val1 === 'object' && typeof val2 === 'object';

    if ((areObjects && !isDeepEqual(val1, val2)) || (!areObjects && val1 !== val2)) {
      return false;
    }
  }

  return true;
};

//Example Usage
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { a: 1, b: { c: 2 } };
console.log(isDeepEqual(obj1, obj2)); // true

This method offers complete control but can become verbose for complex objects.

2. Leveraging JSON.stringify()

A quicker, albeit less robust, method involves converting objects to JSON strings using JSON.stringify() and comparing the strings.

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 2, a: 1 }; 
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // false (order matters!)

Caution: This method is sensitive to property order. Objects with the same properties and values but different orders will be deemed unequal. It also doesn’t handle circular references well.

3. Utilizing Lodash’s isEqual()

The Lodash library provides a powerful isEqual() function specifically designed for deep comparisons. It handles various data types, including arrays, dates, and nested objects, while being order-insensitive.

const _ = require('lodash');
const obj1 = { a: 1, b: { c: 2 } };
const obj2 = { b: { c: 2 }, a: 1 };
console.log(_.isEqual(obj1, obj2)); // true

Lodash’s isEqual() offers a reliable and concise solution for most deep comparison needs.

4. Deep Comparison with the deep-equal Library

The deep-equal npm package provides a dedicated function for deep comparisons with customizable strictness.

const deepEqual = require('deep-equal');
const obj1 = { a: 1, b: "2" };
const obj2 = { a: 1, b: 2 };
console.log(deepEqual(obj1, obj2)); // true (default: coercive equality)
console.log(deepEqual(obj1, obj2, { strict: true })); // false (strict equality)

The strict option allows toggling between strict (===) and loose (==) equality for primitive comparisons.

5. Framework-Specific Methods

Frameworks like Angular and Node.js offer built-in deep comparison utilities:

• Angular: angular.equals(obj1, obj2)
• Node.js: assert.deepStrictEqual(actual, expected[, message]) (throws an error if not equal).

Conclusion

Choosing the right deep comparison technique depends on your project’s specific requirements. For simple objects where order doesn’t matter, JSON.stringify() might suffice. For complex objects and robust comparisons, Lodash’s isEqual() or the deep-equal library are recommended. Understanding these methods allows you to confidently handle object comparisons in your JavaScript code.