How to Compare Two Objects in TypeScript

Comparing objects in TypeScript goes beyond simple equality checks (obj1 === obj2). This is because objects in JavaScript (and by extension, TypeScript) are compared by reference, not by value. Two objects with the same properties and values will be considered unequal if they reside at different memory locations. This article explores various techniques to determine if two objects in TypeScript have equivalent property values.

Different Approaches for Object Comparison

Several methods can be employed to compare two objects based on their content:

1. Shallow Comparison with for...in Loop

A straightforward approach involves iterating through the properties of the second object (obj2) using a for...in loop. For each property, check if a corresponding property with the same value exists in the first object (obj1). If a mismatch is found, return false. If the loop completes without finding any discrepancies, return true.

function shallowCompare(obj1: any, obj2: any): boolean {
  for (const key in obj2) {
    if (obj1[key] !== obj2[key]) {
      return false;
    }
  }
  return true;
}

2. Leveraging Object.keys() and every()

This method utilizes Object.keys() to extract an array of keys from obj2. Then, the every() method is applied to this array to verify if every key satisfies a condition: the key must exist in obj1 and have the same corresponding value.

function compareUsingKeys(obj1: any, obj2: any): boolean {
  return Object.keys(obj2).every(key => obj1.hasOwnProperty(key) && obj1[key] === obj2[key]);
}

3. Deep Comparison with JSON.stringify()

This technique converts both objects into JSON strings using JSON.stringify(). Subsequently, a strict equality check (===) is performed on the resulting strings. While seemingly simple, this approach has limitations. It requires properties to be in the same order within the objects and doesn’t handle complex data structures like functions or circular references effectively.

function compareUsingJSON(obj1: any, obj2: any): boolean {
    return JSON.stringify(obj1) === JSON.stringify(obj2);
}

4. Custom Deep Comparison Function

For robust deep comparisons, a recursive function can be implemented. This function would meticulously compare each property and value, including nested objects and arrays.

function deepCompare(obj1: any, obj2: any): boolean {
  if (typeof obj1 !== typeof obj2) return false;
  if (typeof obj1 !== 'object') return obj1 === obj2;

  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;

  for (let key of keys1) {
    if (!deepCompare(obj1[key], obj2[key])) return false;
  }

  return true;
}

5. Utilizing Lodash’s _.isEqual()

The Lodash library provides a powerful _.isEqual() function specifically designed for deep object comparison. This function efficiently handles various data types and edge cases.

import * as _ from 'lodash';

function compareUsingLodash(obj1: any, obj2: any): boolean {
  return _.isEqual(obj1, obj2);
}

Choosing the Right Approach

The optimal method for object comparison depends on the specific requirements of your project. For simple comparisons involving shallow objects, the for...in loop or Object.keys() with every() suffice. For complex nested structures, a custom deep comparison function or Lodash’s _.isEqual() is recommended. Consider factors like performance, object complexity, and the presence of circular references when selecting your approach. Always remember that JSON.stringify() can be unreliable for deep comparisons due to its limitations.