How to Compare Objects in JavaScript
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 valuesHowever, 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); // falseThe 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); // falseSecond, 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); // trueUsing 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); // trueconst obj1 = { name: 'Will Riker', rank: 'Commander' };
class Character {}
const obj2 = new Character();
Object.assign(obj2, { name: 'Will Riker', rank: 'Commander' });
_.isEqual(obj1, obj2); // falseThe isEqual() function is also smart enough to avoid infinite recursion.
const obj1 = {};
const obj2 = {};
obj1.circular = obj1;
obj2.circular = obj1;
_.isEqual(obj1, obj2); // trueIf 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.