How to Compare Two Objects in JavaScript: Different Approaches Explained

When you’re working with JavaScript, you’ll frequently encounter situations where you need to determine if two objects are equal. However, unlike primitive data types, comparing objects in JavaScript isn’t as straightforward as using simple operators.

In this guide, we’ll explore different methods to effectively compare two objects in JavaScript. We’ll delve into the nuances of object comparison, highlighting the strengths and limitations of each approach to help you choose the best strategy for your specific needs. Let’s dive in!

Understanding the Difference: Primitive vs. Non-Primitive Data Type Comparison

JavaScript data types are broadly classified into two categories: primitive and non-primitive. This distinction is crucial when comparing values.

Primitive data types include Number, String, Boolean, Undefined, Null, and Symbol. These types hold a single value, and comparisons are based directly on their value.

For example, comparing numbers is simple:

let num1 = 10;
let num2 = 10;
console.log(num1 === num2); // true

Similarly, if we assign num1 to another variable:

let num1 = 10;
let num2 = 10;
let num3 = num1;
console.log(num1 === num3); // true

In both cases, the comparison correctly identifies the values as equal.

However, non-primitive data types, primarily objects in JavaScript, behave differently. Objects are compared by reference, not by their underlying values.

Consider these two objects:

let obj1 = { name: 'Alice', age: 30 };
let obj2 = { name: 'Alice', age: 30 };
console.log(obj1 === obj2); // false

Despite obj1 and obj2 having identical properties and values, the comparison using the strict equality operator (===) returns false. Why does this happen?

Even using the loose equality operator (==) yields the same result:

let obj1 = { name: 'Alice', age: 30 };
let obj2 = { name: 'Alice', age: 30 };
console.log(obj1 == obj2); // false

This outcome stems from how JavaScript handles object comparison. When comparing objects, JavaScript checks if they are the same object in memory, rather than comparing their contents. Primitive types are compared by value, while non-primitive types are compared by reference. Let’s examine how this works in practice.

Comparing Objects by Reference in JavaScript

As demonstrated above, directly using == or === to compare objects checks for reference equality. This means it verifies if two object variables point to the exact same location in memory.

Let’s illustrate this with an example:

let obj1 = { name: 'Alice', age: 30 };
let obj2 = obj1; // obj2 now references the same object as obj1
console.log(obj1 === obj2); // true

In this scenario, obj2 = obj1 doesn’t create a copy of obj1. Instead, obj2 becomes another reference to the same object that obj1 points to. Therefore, obj1 === obj2 evaluates to true because they both refer to the same object instance in memory.

When you assign an object variable to another, you’re essentially copying the memory address (reference), not the object’s value itself. This is why direct comparison using === or == is insufficient when you need to compare objects based on their content.

While comparing by reference has its use cases (like checking if two variables point to the same object), most often, you’ll need to compare objects based on their values. Let’s explore methods to achieve value-based object comparison.

Comparing Objects by Value: Utilizing JSON.stringify()

One common technique to compare objects by value in JavaScript involves using the JSON.stringify() method.

JSON.stringify() converts a JavaScript object into a JSON string representation. Once both objects are converted to strings, you can easily compare these strings using the equality operators.

Here’s how it works:

let obj1 = { name: 'Alice', age: 30 };
let obj2 = { name: 'Alice', age: 30 };
console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true

JSON.stringify(obj1) and JSON.stringify(obj2) both produce the same JSON string: {"name":"Alice","age":30}. Consequently, the string comparison returns true, indicating that the objects have the same content.

However, JSON.stringify() has limitations and might not be suitable for all scenarios.

Limitations of JSON.stringify() for Object Comparison

1. Key Order Sensitivity: JSON.stringify() relies on the order of keys in the object. If the keys are in a different order, even if the values are the same, the stringified versions will differ.

   let obj1 = { age: 30, name: 'Alice' };
   let obj2 = { name: 'Alice', age: 30 };
   console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // false

   In this example, although the objects have the same key-value pairs, the different key order leads to JSON.stringify() producing different strings, resulting in a false comparison.

2. Handling of undefined Values: JSON.stringify() omits object properties with undefined values. This can lead to inaccurate comparisons if undefined values are significant in your object structure.

   let obj1 = { name: 'Alice' };
   let obj2 = { name: 'Alice', city: undefined };
   console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // true (unexpected)

   Here, obj2 has an undefined property city, which JSON.stringify() ignores. This results in both objects being stringified to {"name":"Alice"}, leading to a misleading true result.

3. Circular References and Functions: JSON.stringify() cannot handle circular references within objects and will throw an error. It also cannot serialize functions; function properties will be omitted from the stringified output.

Due to these limitations, while JSON.stringify() can be a quick and easy solution for simple object comparisons, it’s not robust enough for complex scenarios, especially when key order, undefined values, or object types beyond basic JSON structures matter.

Comparing Objects by Value: Leveraging Lodash’s _.isEqual()

For a more robust and reliable way to compare objects by value, especially in complex situations, the Lodash library provides an excellent solution with its _.isEqual() method.

Lodash is a widely used JavaScript utility library that offers a wide range of helpful functions, including deep object comparison. The _.isEqual() method performs a deep comparison between two values to determine if they are equivalent.

Let’s revisit the key order example and use _.isEqual():

const _ = require('lodash'); // If using Node.js, otherwise import Lodash in your HTML

let obj1 = { age: 30, name: 'Alice' };
let obj2 = { name: 'Alice', age: 30 };
console.log(_.isEqual(obj1, obj2)); // true

As you can see, _.isEqual() correctly returns true even though the keys are in a different order. _.isEqual() handles key order, undefined values, and performs deep comparisons for nested objects and arrays.

_.isEqual() offers a comprehensive solution for comparing objects by value, addressing the limitations of JSON.stringify(). It recursively compares properties of objects and elements of arrays, ensuring a thorough value-based comparison.

Benefits of Using _.isEqual()

• Deep Comparison: Recursively compares nested objects and arrays.
• Key Order Insensitive: Ignores the order of keys in objects.
• Handles undefined Values: Correctly compares objects with undefined properties.
• Supports Various Data Types: Works with various JavaScript data types beyond basic JSON structures, including Dates, Maps, Sets, and more.

While _.isEqual() requires including the Lodash library in your project, its robust and accurate object comparison capabilities often make it the preferred choice, especially in scenarios where you need reliable value-based object equality checks.

Conclusion: Choosing the Right Object Comparison Method

In JavaScript, comparing objects for equality requires understanding the distinction between reference and value comparison.

• Direct comparison using === or == checks for reference equality, verifying if variables point to the same object instance.
• JSON.stringify() offers a simple way to compare objects by value but has limitations regarding key order, undefined values, and complex object structures.
• Lodash’s _.isEqual() provides the most robust and reliable solution for comparing objects by value, performing deep comparisons and handling various edge cases effectively.

For most scenarios requiring value-based object comparison in JavaScript, _.isEqual() is the recommended approach due to its accuracy and comprehensive handling of object properties and structures. However, for very simple objects where key order is guaranteed and you’re aware of the limitations, JSON.stringify() might suffice as a quicker alternative.

Ultimately, selecting the appropriate method depends on the complexity of the objects you’re comparing and the level of accuracy required for your specific use case. Understanding the strengths and weaknesses of each method empowers you to make informed decisions when comparing objects in JavaScript.