How to Check if Two Objects Are Equal in JavaScript

In JavaScript, to check if two objects are equal, you need to compare their properties and values because == and === only check if they reference the same object. You can write a function to do a deep comparison of keys and values or use libraries like Lodash's _.isEqual() for this purpose.

Syntax

JavaScript does not have a built-in operator to compare objects by their content. You must write a function that:

• Checks if both inputs are objects.
• Compares the number of keys.
• Recursively compares each key's value.

This is called a deep equality check.

javascript

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) return true;
  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
    return false;
  }
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  for (const key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }
  return true;
}

Example

This example shows how to use the deepEqual function to compare two objects with the same keys and values, including nested objects.

javascript

function deepEqual(obj1, obj2) {
  if (obj1 === obj2) return true;
  if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) {
    return false;
  }
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) return false;
  for (const key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }
  return true;
}

const objA = { name: 'Alice', age: 25, details: { city: 'NY' } };
const objB = { name: 'Alice', age: 25, details: { city: 'NY' } };
const objC = { name: 'Bob', age: 30 };

console.log(deepEqual(objA, objB));
console.log(deepEqual(objA, objC));

Output

true
false

Common Pitfalls

Many developers try to compare objects using == or ===, but these only check if both variables point to the same object in memory, not if their contents are equal.

Also, shallow comparisons (checking only top-level keys) can miss differences in nested objects.

javascript

const obj1 = { a: 1 };
const obj2 = { a: 1 };

console.log(obj1 === obj2); // false because different references

// Shallow comparison example (wrong for nested objects)
function shallowEqual(o1, o2) {
  const keys1 = Object.keys(o1);
  const keys2 = Object.keys(o2);
  if (keys1.length !== keys2.length) return false;
  for (const key of keys1) {
    if (o1[key] !== o2[key]) return false;
  }
  return true;
}

const nested1 = { a: { b: 2 } };
const nested2 = { a: { b: 2 } };
console.log(shallowEqual(nested1, nested2)); // false because nested objects differ by reference

// Correct way is deepEqual as shown earlier

Output

false
false

Quick Reference

• Use === for primitive values only.
• Use a deep comparison function for objects.
• Consider libraries like Lodash's _.isEqual() for complex cases.
• Remember that functions and symbols inside objects require special handling.

Key Takeaways

Use a deep comparison function to check if two objects have the same keys and values.

The === operator only checks if two objects are the same reference, not their content.

Shallow comparisons can miss differences in nested objects.

Libraries like Lodash provide reliable deep equality checks for complex objects.

Always consider edge cases like null, arrays, and nested objects when comparing.