Deep Equality Comparison of JavaScript Objects

As I dive deeper into Object Oriented programming using JavaScript at Launch School, I have found that I repeatedly need to check if two objects have the same key/value pairs.

In Ruby, this was easy- Ruby understood that you wanted to compare the entries that were in a hash:

But in JavaScript the equality operators are going to check whether the two objects occupy the same spot in your computer’s memory. The example below returns false instead of true. Dang it!

What do we do? JavaScript doesn’t give us an out of the box solution, so we have to create our own. Our function will need to iterate over every key/value pair in one object and compare them to every key/value pair in the other object:

However, we have a problem, what happens if one of the values in our object is an object itself? In the below example the cats key has a value of [2] instead of 2. Arrays are objects in JavaScript, so like before when our iterator compares the two values, it will return false for the whole comparison because these two array objects are not the same spot in the computer’s memory.

What do we do now? Recursion. All we need to do is insert a conditional that checks whether the current value is an object itself. If it is, we can feed the current value and its counterpart in the comparison object back into our original objectsEqual function (line 6 below). This will give us a deep equality check.

Great! All done right? Maybe. The last thing you should ask yourself is whether the order of insertion matters in your object comparison. For example, a and b below have the same key/value pairs, but they are in different order. Our current function would say that these two are the same:

For most use cases the order probably doesn’t matter… but what if the insertion order did matter?

In that case you would need to access the key/value pairs in an ordered way. You can do that by calling Object.entries() on your objects to convert them to an array of key/value pair arrays.

For example, this:

Becomes this:

Once you convert each object into an array of arrays, you can iterate through one of them checking to see whether every element in the comparison array at the same index is the same.

As before, we’re still using recursion (on line 11 in the above example) if we run into a value that is itself an object.

This order check is only an issue if the keys are strings. In JavaScript, if an object key is a String, then they are iterated over in insertion order. If the keys are Numbers, then the iteration order will be in ascending order. If there is a mix of Strings and Numbers, then the Numbers all come first in ascending order and the Strings come next in insertion order.

Now you have some tools to reach for if you need to determine object equality in JavaScript!