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.
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.
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?
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() :
The JSON.stringify() function comes with a few limitations that make it a lackluster choice for checking deep equality. First, key order matters:
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.
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.
Сравните два объекта в JavaScript
В этом посте мы обсудим, как сравнить два объекта в JavaScript. Два объекта считаются равными, если оба объекта одного типа, проходят строгое равенство (===) сравнения, и все их свойства равны.
1. Использование библиотеки Lodash/Underscore
С библиотекой lodash или underscore вы можете использовать _.isEqual метод. Он выполняет глубокое сравнение двух объектов, чтобы определить, эквивалентны ли они. Следующий пример кода демонстрирует его использование:
How to Compare Objects in JavaScript
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.
Table of Contents
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 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:
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:
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) 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:
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:
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() :
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:
- of Node built-in util module
- or _.isEqual(object1, object2) of lodash library.
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.
Загрузка...
