JavaScript Compare Two Objects: Methods and Best Practices

Comparing objects in JavaScript might seem straightforward at first glance, but it quickly reveals nuances that can lead to unexpected results. Unlike primitive data types, objects in JavaScript are compared by reference, not by value. This distinction is crucial when you need to determine if two objects are truly “equal”.

In this comprehensive guide, we will explore different techniques to compare objects in JavaScript, ranging from simple reference checks to deep value comparisons. We’ll delve into the strengths and limitations of each method, empowering you to choose the most appropriate approach for your specific needs.

Understanding Primitive vs. Non-Primitive Data Type Comparison in JavaScript

JavaScript data types are broadly categorized into two groups: primitive and non-primitive. Primitive types include Number, String, Boolean, Undefined, Null, and Symbol. These types hold a single value, and their comparison is based directly on their values.

For instance, when you compare two numbers using the strict equality operator (===), JavaScript checks if their values are the same:

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

Similarly, strings and booleans are compared by their literal values.

However, objects, being non-primitive data types, behave differently. Objects are collections of properties, and when you compare two objects using === or the loose equality operator (==), JavaScript checks if they refer to the same object in memory, not if they have the same properties and values.

Consider this example:

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

Even though obj1 and obj2 have identical properties and values, the comparison yields false. This is because obj1 and obj2 are distinct objects residing at different memory locations. They hold the same values but are not the same object in terms of reference.

This behavior highlights the fundamental difference: primitive types are compared by value, while non-primitive types (objects) are compared by reference.

Comparing Objects by Reference in JavaScript

As demonstrated above, the === and == operators in JavaScript perform a reference comparison for objects. They only return true if the two operands refer to the exact same object instance.

To explicitly compare objects by reference, you are essentially checking if two variables point to the same memory address.

Let’s illustrate this:

let obj1 = { name: 'John', age: 30 };
let obj2 = obj1; // obj2 now references the same object as obj1

console.log(obj1 === obj2); // Output: true

In this case, obj2 = obj1 does not create a new object. Instead, it assigns the reference of obj1 to obj2. Now, both variables point to the same object in memory, hence obj1 === obj2 returns true.

While reference comparison is straightforward, it’s often not what you need when working with objects. In most scenarios, you’ll want to compare objects based on their content – their properties and values – which is known as value comparison.

Comparing Objects by Value: JSON.stringify() Method

One common approach to compare objects by value in JavaScript is using the JSON.stringify() method. This method converts a JavaScript object into a JSON string. Once both objects are stringified, you can use the strict equality operator (===) to compare the resulting strings.

let obj1 = { name: 'John', age: 30 };
let obj2 = { name: 'John', age: 30 };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // Output: true

JSON.stringify() transforms both obj1 and obj2 into identical JSON strings, leading to a true result when compared with ===.

However, JSON.stringify() has limitations that you should be aware of:

Order of Properties Matters

JSON.stringify() is sensitive to the order of properties in objects. If two objects have the same properties and values but in a different order, JSON.stringify() will produce different strings, and the comparison will return false.

let obj1 = { age: 30, name: 'John' }; // Property order different
let obj2 = { name: 'John', age: 30 };

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // Output: false

In this example, despite having the same content, obj1 and obj2 are considered unequal by JSON.stringify() due to the differing property order.

Handling of undefined Values

Another limitation is how JSON.stringify() handles undefined values. It omits properties with undefined values from the stringified output. This can lead to incorrect comparisons if you are dealing with objects that might contain undefined values.

let obj1 = { name: 'John' };
let obj2 = { name: 'John', city: undefined }; // city is undefined

console.log(JSON.stringify(obj1) === JSON.stringify(obj2)); // Output: true (unexpected)

Here, obj2 has an undefined property city, but JSON.stringify() ignores it, making it appear equal to obj1, which is likely not the intended behavior.

Comparing Objects by Value: Lodash _.isEqual() Method

For a more robust and reliable way to compare objects by value in JavaScript, consider using the Lodash library, specifically its _.isEqual() method. Lodash is a widely used utility library that provides a rich set of functions for common programming tasks, including object comparison.

_.isEqual() performs a deep comparison between two values, including objects. It handles various edge cases and considers the values of properties, regardless of their order.

To use _.isEqual(), you first need to install Lodash. If you are using npm, you can install it with:

npm install lodash

Then, you can import and use _.isEqual():

import _ from 'lodash';

let obj1 = { age: 30, name: 'John' }; // Property order different
let obj2 = { name: 'John', age: 30 };

console.log(_.isEqual(obj1, obj2)); // Output: true (correctly compares by value)

_.isEqual() correctly identifies obj1 and obj2 as equal because it compares their values deeply, ignoring the order of properties.

Furthermore, _.isEqual() handles undefined values and other complex scenarios more accurately than JSON.stringify(), making it a more dependable solution for value-based object comparison.

import _ from 'lodash';

let obj1 = { name: 'John' };
let obj2 = { name: 'John', city: undefined }; // city is undefined

console.log(_.isEqual(obj1, obj2)); // Output: false (correctly distinguishes objects)

Conclusion: Choosing the Right Object Comparison Method

In JavaScript, comparing objects requires understanding the distinction between reference and value comparison. While === and == perform reference comparisons, methods like JSON.stringify() and Lodash’s _.isEqual() enable value-based comparisons.

• Reference Comparison (===, ==): Use when you need to check if two variables point to the exact same object instance in memory.

• Value Comparison with JSON.stringify(): Suitable for simple objects when property order is consistent and undefined values are not a concern. Be mindful of its limitations regarding property order and undefined values.

• Value Comparison with Lodash _.isEqual(): The recommended approach for robust and accurate value comparison, especially for complex objects. It handles property order, undefined values, and performs deep comparisons, making it the most reliable method in most scenarios.

By understanding these different approaches, you can effectively compare objects in JavaScript and choose the method that best aligns with your specific requirements for object equality checks.

Thank you for exploring object comparison in JavaScript. Happy coding!