JavaScript's default equality operators (== and ===) perform reference equality for objects. This means two objects are considered equal only if they point to the exact same memory location. To check for structural equality (i.e., if two objects have the same properties and values), we need custom logic.

Method 1: Stringification with JSON.stringify()

A common, but flawed, approach is to convert objects to strings using JSON.stringify() and then compare the resulting strings.

const user1 = { id: 1, name: 'Alice' };
const user2 = { id: 2, name: 'Bob' };
const user3 = { id: 1, name: 'Alice' };

console.log(JSON.stringify(user1) === JSON.stringify(user2)); // false
console.log(JSON.stringify(user1) === JSON.stringify(user3)); // true

This method works for simple cases but fails when property order differs, as the string representation will change.

const profileA = { name: 'Alice', age: 30 };
const profileB = { age: 30, name: 'Alice' };

console.log(JSON.stringify(profileA) === JSON.stringify(profileB)); // false

This demonstrates the primary drawback of relying on stringification for equality checks.

Method 2: Shallow Property Comparison

A more robust approach is to compare the object's own enumerable property names and their corresponding values.

function areObjectsShallowEqual(objA, objB) {
  const keysA = Object.getOwnPropertyNames(objA);
  const keysB = Object.getOwnPropertyNames(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  for (let i = 0; i < keysA.length; i++) {
    const key = keysA[i];
    if (objA[key] !== objB[key]) {
      return false;
    }
  }

  return true;
}

This function correctly handles objects with properties in different orders. However, it only performs a shallow comparision. If a property's value is another object, it will not recursively check for equality within that nested object.

const userA = {
  id: 1,
  profile: { name: 'Alice', age: 30 }
};

const userB = {
  id: 1,
  profile: { name: 'Alice', age: 30 }
};

console.log(areObjectsShallowEqual(userA, userB)); // false

Method 3: Deep Recurisve Comparison

To handle nested objects, we can extend the previous method with recursion. The function will call itself when it encounters an object as a property value.

function areObjectsDeepEqual(objA, objB) {
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  for (const key of keysA) {
    const valueA = objA[key];
    const valueB = objB[key];

    const areObjects = typeof valueA === 'object' && typeof valueB === 'object';

    if (areObjects && !areObjectsDeepEqual(valueA, valueB)) {
      return false;
    } else if (!areObjects && valueA !== valueB) {
      return false;
    }
  }

  return true;
}

This recursive function now correctly handles nested structures.

const userA = {
  id: 1,
  profile: { name: 'Alice', age: 30 }
};

const userB = {
  id: 1,
  profile: { name: 'Alice', age: 30 }
};

console.log(areObjectsDeepEqual(userA, userB)); // true