How to Compare Two Objects in JavaScript: Simple Methods

In JavaScript, comparing two objects with == or === checks if they reference the same object, not their content. To compare their content, you can use JSON.stringify() for simple cases or write a function to check each property deeply.

Syntax

To compare two objects, you can use:

• obj1 === obj2: Checks if both variables point to the exact same object.
• JSON.stringify(obj1) === JSON.stringify(obj2): Compares the string versions of objects for shallow equality.
• Custom deep comparison function: Recursively checks each property and value.

javascript

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

// Reference equality
console.log(obj1 === obj2); // false

// Shallow content equality
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true

Output

false
true

Example

This example shows how to compare two objects deeply by checking all keys and values recursively.

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 a = { name: 'Alice', details: { age: 25 } };
const b = { name: 'Alice', details: { age: 25 } };
const c = { name: 'Alice', details: { age: 30 } };

console.log(deepEqual(a, b)); // true
console.log(deepEqual(a, c)); // false

Output

true
false

Common Pitfalls

Using == or === compares object references, not their content, so two objects with the same properties are not equal. Also, JSON.stringify() fails if object properties are in different orders or contain functions, undefined, or symbols.

Deep comparison handles these cases but can be slower.

javascript

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 2, a: 1 };

// Incorrect: order matters in JSON.stringify
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // false

// Correct: deepEqual ignores order
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;
}

console.log(deepEqual(obj1, obj2)); // true

Output

false
true

Quick Reference

Summary tips for comparing objects in JavaScript:

• Use === to check if two variables point to the same object.
• Use JSON.stringify() for simple, shallow comparisons without functions or undefined.
• Use a deep comparison function to check nested objects and ignore property order.
• Remember that functions, symbols, and undefined are not handled by JSON.stringify().

Key Takeaways

Using === compares object references, not their content.

JSON.stringify() works for simple shallow comparisons but has limitations.

Deep comparison functions check all nested properties for true equality.

Property order and special values can cause JSON.stringify() to fail.

Choose the comparison method based on your objects' complexity.