Usually, when you compare data types like int and strings in JavaScript, you use the equality operators (== and ===). However, comparing objects with == and === will not work.
To fix this, one option is to stringify both objects and then use the equality operators.
Using JSON.stringify()
We first convert the objects to their stringified version using JSON.stringify() and then compare them using ===:
const obj1 = {"a": 1, "b": 2}; const obj2 = {"a": 1, "b": 2}; console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true
If the order of the properties is different, the above method will evaluate as false even though the properties are the same:
const obj1 = {"a": 1, "b": 2}; const obj2 = {"b": 2, "a": 1}; console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // false
To overcome this issue, we can use a JavaScript library, called lodash, instead.
Using lodash
lodash is a JavaScript library that offers _.isEqual(value1, value2), which performs a deep comparison between two values to check if they are equivalent.
import _ from "lodash"; const obj1 = {"a": 1, "b": 2}; const obj2 = {"b": 2, "a": 1}; console.log(_.isEqual(obj1, obj2)); // true
CONTRIBUTOR
Nouman Abbasi
Copyright ©2022 Educative, Inc. All rights reserved
It's simple to compare primitive values in JavaScript. Just use any of the available eqality operators, for example the strict equality:
Objects, however, are more difficult to compare because they are structured data. In this post, you will learn how to correctly compare objects in JavaScript.
1. Referential equality
JavaScript provides 3 ways to compare values:
- The strict equality operator ===
- The loose equality operator ==
- Object.is() function
When comparing objects using any of the above, the comparison evaluates to true only if the compared values reference the same object instance. This is the referential equality.
Let's define the objects hero1 and hero2, and see the referential equality in practice:
hero1 === hero1; // => true
hero1 === hero2; // => false
hero1 == hero1; // => true
hero1 == hero2; // => false
Object.is(hero1, hero1); // => true
Object.is(hero1, hero2); // => false
hero1 === hero1 evaluates to true because both operands point to the same object instance hero1.
On the other side, hero1 === hero2 evaluates to false because the operands hero1 and hero2 are different object instances.
Interestingly hero1 and hero2 objects have the same content: both have one property name with the value 'Batman'. Still, even comparing objects of the same structure, hero1 === hero2 evaluates to false.
Referential equality is useful when you'd like to compare object references, rather than their content.
But in most of the situations you'd need to compare the actual content of the objects: the properties and their values. Let's see how to do that.
2. Manual comparison
The obvious way to compare objects by content is to read the properties and compare them manually.
For example, let's write a special function isHeroEqual() that compares 2 hero objects:
function isHeroEqual(object1, object2) {
return object1.name === object2.name;
isHeroEqual(hero1, hero2); // => true
isHeroEqual(hero1, hero3); // => false
isHeroEqual() accesses the property name of both objects and compares their values.
If the compared objects have a few properties, I prefer to write the comparison functions like isHeroEqual(). Such functions have good performance — only a few property accessors and equality operators are involved in the comparison.
Manual comparison requires manual extraction of properties — for simple objects, that's not a problem. But to compare bigger objects (or objects of unknown structure), the manual comparison isn't convenient because it requires a lot of boilerplate code.
Let's see how the shallow equality of objects can help.
3. Shallow equality
During shallow equality check of objects you get the list of properties (using Object.keys()) of both objects, then check the properties' values for equality.
Here's a possible implementation of shallow equality check:
function shallowEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
if (object1[key] !== object2[key]) {
Inside the function, keys1 and keys2 are arrays containing correspondingly the property names of object1 and object2.
for cycle iterates over the keys, and compares each property of object1 and object2 for equality object1[key] !== object2[key].
Let's use the shallow equality to compare objects with many properties:
shallowEqual(hero1, hero2); // => true
shallowEqual(hero1, hero3); // => false
shallowEqual(hero1, hero2) returns true because the objects hero1 and hero2 have the same properties (name and realName) with the same values.
On the other side, shallowEqual(hero1, hero3) returns false since hero1 and hero3 have different properties.
If the properties' values of objects to compare are primitive values, the shallow equality check is the way to go.
But objects in JavaScript can be nested. In such a case, unfortunately, the shallow equality doesn't work well.
Let's perform a shallow equality check on objects having nested objects:
shallowEqual(hero1, hero2); // => false
This time, even both hero1 and hero2 having the same content, shallowEqual(hero1, hero2) returns false.
The nested objects hero1.address and hero2.address are different object instances. Thus the shallow equality considers that hero1.address and hero2.address are different values.
Fortuntately, the deep equality correctly compares the objects containing other objects. Let's see how it works.
4. Deep equality
The deep equality is similar to the shallow equality, but with one difference. During the shallow check, if the compared properties are objects, a recursive shallow equality check is performed on these nested objects.
Let's see an implementation of deep equality check:
function deepEqual(object1, object2) {
const keys1 = Object.keys(object1);
const keys2 = Object.keys(object2);
if (keys1.length !== keys2.length) {
for (const key of keys1) {
const val1 = object1[key];
const val2 = object2[key];
const areObjects = isObject(val1) && isObject(val2);
areObjects && !deepEqual(val1, val2) ||
!areObjects && val1 !== val2
function isObject(object) {
return object != null && typeof object === 'object';
The highlighted line areObjects && !deepEqual(val1, val2) indicates that as soon as the compared properties are objects, a recursive call starts to verify whether the nested objects are equal too.
Now, let's see an example of deepEquality():
deepEqual(hero1, hero2); // => true
The deep equality function correctly determines that hero1 and hero2 have the same properties and values, including the equality of the nested objects hero1.address and hero2.address.
To deeply compare objects I recommend to use:
The referential equality (using ===, == or Object.is()) determines whether the operands are the same object instance.
The manual equality check requires a manual comparison of properties' values. While this check requires writing by hand the properties to compare, I find this approach convenient because of its simplicity.
When the compared objects have a lot of properties or the structure of the objects is determined during runtime, a better approach is to use shallow check.
Finally, if the compared objects have nested objects, the deep equality check is the way to go.
Hopefully, my post has helped you understand the specifics of checking objects in JavaScript.
What is the main issue when using JSON.stringify(object1) === JSON.stringify(object2) to compare objects?