Equality Comparison in JavaScript

Comparing objects in JavaScript is not a simple process. The numbers, strings, and booleans can be easily checked for equality. However, comparing objects for their equality is not the same. Whether you are working with API responses, validating form data, or handling state change in React, it’s important to learn the right way to compare objects.

In this blog, you will explore different ways to compare JavaScript objects, covering all methods to perform shallow and deep comparison in JavaScript.

Table of Contents:

• Object Equality in JavaScript
  • Referential Equality
  • Deep Equality
• Methods to Compare Objects in JavaScript
  • Method 1: Manual Comparison
  • Method 2: Using JSON.stringify()
  • Method 3: Using Lodash Library
  • Method 4: Using the deep-equal Library
• Performance Comparison
• Conclusion

Object Equality in JavaScript

Before learning more about the methods to compare objects for equality, it’s better to understand object equality and its types:

Referential Equality

Referential equality is also called shallow comparison in JavaScript. This checks if two variables point to the same memory reference or not. If they do, then they are considered equal. Otherwise, they are considered unequal.

Example:

Output:

Explanation: In this example, obj1 and obj2 are two objects with the same key-value pair. console.log(obj1 === obj2) produces false because both point to different references, irrespective of the fact that they contain the same value. And console.log(obj1 === obj3) produces true because obj3 is just a reference to obj1. The === operator checks not only the element but also for references in JavaScript. 

HTML to Full-Stack: Your Path to Success

Master Web Development – Join Our Course!

Explore Program

Deep Equality

Deep equality only checks whether objects have the same properties and values or not. It does not compare with references or memory locations.

Example:

Output:

Explanation: In this example, obj1 and obj2 both have similar content, but the === operator considers them differently. Thus, to perform the deep equality comparison, you have to use other methods.

Methods to Compare Objects in JavaScript

Here are some methods to compare objects in JavaScript. Let’s discuss each one by one:

Method 1: Manual Comparison

It is the traditional way to compare objects in JavaScript. Here, the recursive function checks for each property and value of both objects.

Example:

Output:

Explanation: The isDeepEqual() function is a recursive approach to deeply compare two objects in JavaScript. And isObject() is the helper function that confirms that the function only performs recursion on actual objects.

Method 2: Using JSON.stringify()

It is the simplest way to compare the objects in JavaScript. The JSON.stringify() converts objects into JSON strings and then compares the results. The only disadvantage is that if the objects contain the properties in a different order, then JSON.stringify() fails to compare the objects.

Example:

Output:

Explanation: The JSON.stringify() first converts objects into strings and then performs a comparison. And as you know, strings are a primitive data type. Thus, true is produced as output.

Method 3: Using Lodash Library

Lodash is a popular external library that provides methods for performing deep object comparison.

Example:

Output:

Explanation: The isEqual() method of the Lodash library is used to perform a deep comparison between the objects in JavaScript.

Method 4: Using the deep-equal Library

Another useful library is deep-equal. It also provides an easy way to compare objects deeply.

Example:

Output:

Explanation: The deepEqual(obj1, obj2) is also used to perform a deep comparison of the objects in JavaScript. To use the deep-equal library, you are required to install it as a dependency.

Performance Comparison

JavaScript provides various methods to compare objects. Each method has a different performance:

• The JSON.stringify() is fast and simple, but fails to compare objects that have similar properties but different orders of properties.
• A recursive comparison is accurate, but it is slower for deeply nested objects.
• The Lodash and deep-equal are the other options for complex comparison, but they require downloading these libraries as external dependencies.

Conclusion

Comparing objects in JavaScript can be difficult, but using the right method depends on your needs. Like for simple comparisons, JSON.stringify() is used, and for difficult comparisons, Lodash or deep-equal libraries are more efficient. Understanding these methods helps you to perform the object comparison efficiently.

How To Compare Two Objects For Equality in JavaScript – FAQs