How to Compare Objects in JavaScript

Mar 23, 2021

In JavaScript, objets are always stored by reference. That means one object is strictly equal another only if they both point to the same object in memory.

const o1 = { answer: 42 };
const o2 = o1;
const o3 = { answer: 42 };

o1 === o2; // true, same reference
o1 === o3; // false, different reference but same keys and values

However, what if you want to check whether two POJOs have the same data? In other words, the same keys and values? Here's 3 possible approaches.

Keys and Values Shallow Equal

One simple approach is to iterate through each key and value in the two objects and check if the keys and values are strictly equal.

const o1 = { question: null, answer: 42 };
const o2 = { question: null, answer: 42 };

objectsEqual(o1, o2); // true
objectsEqual(o1, { answer: 43 }); // false

function objectsEqual(o1, o2) {
  const entries1 = Object.entries(o1);
  const entries2 = Object.entries(o2);
  if (entries1.length !== entries2.length) {
    return false;
  }
  for (let i = 0; i < entries1.length; ++i) {
    // Keys
    if (entries1[i][0] !== entries2[i][0]) {
      return false;
    }
    // Values
    if (entries1[i][1] !== entries2[i][1]) {
      return false;
    }
  }

  return true;
}

Deep Equality using JSON.stringify()

The previous section shows how to compare objects by checking if the two objects' keys and values are strictly equal. But what if one of the values is an object?

const o1 = { name: { first: 'Arthur', lastName: 'Dent' }, planet: 'Earth' };
const o2 = { name: { first: 'Arthur', lastName: 'Dent' }, planet: 'Earth' };

objectsEqual(o1, o2); // false, because `o1.name !== o2.name`

You can make objectsEqual() recursive, but then you need to be careful about infinite recursion. An easy way to compare whether two POJOs are deeply equal is comparing their JSON representations using JSON.stringify():

const o1 = { name: { first: 'Arthur', lastName: 'Dent' }, planet: 'Earth' };
const o2 = { name: { first: 'Arthur', lastName: 'Dent' }, planet: 'Earth' };

JSON.stringify(o1) === JSON.stringify(o2); // true

delete o2.planet;
JSON.stringify(o1) === JSON.stringify(o2); // false

The JSON.stringify() function comes with a few limitations that make it a lackluster choice for checking deep equality. First, key order matters:

const o1 = { question: null, answer: 42 };
const o2 = { answer: 42, question: null };
JSON.stringify(o1) === JSON.stringify(o2); // false

Second, not all types are representable in JSON. The JSON.stringify() function converts dates to strings, and ignores keys whose value is undefined, which can lead to surprising results.

const o1 = { myDate: new Date('2016-06-01'), otherProperty: undefined };
const o2 = { myDate: '2016-01-01T00:00:00.000Z' };

JSON.stringify(o1) === JSON.stringify(o2); // true

Using Lodash's isEqual()

Lodash's isEqual() function is the most sophisticated way to compare two objects. It handles a wide variety of edge cases and avoids a lot of the pitfalls of the previous two approaches.

const obj1 = {
  date: new Date('2020/06/01'),
  num: new Number(1)
};
const obj2 = {
  date: new Date('2020/06/01'),
  num: 1
};

_.isEqual(obj1, obj2); // true
const obj1 = { name: 'Will Riker', rank: 'Commander' };

class Character {}
const obj2 = new Character();
Object.assign(obj2, { name: 'Will Riker', rank: 'Commander' });

_.isEqual(obj1, obj2); // false

The isEqual() function is also smart enough to avoid infinite recursion.

const obj1 = {};
const obj2 = {};

obj1.circular = obj1;
obj2.circular = obj1;

_.isEqual(obj1, obj2); // true

If you're already using Lodash, isEqual() is the best approach to comparing if two objects are deep equal. The shallow strict comparison approach is good for cases where you aren't worried about nested objects, and JSON.stringify() can help provide a rough deep equality check in cases where you can't use Lodash. But, if you can use Lodash, isEqual() is the best approach for checking whether two objects are deeply equal.


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Fundamentals Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!