Comparing Two Objects in JavaScript

3 min readAug 4, 2024

Introduction

In JavaScript, comparing two objects can be a tricky endeavor due to the way the language handles object references. Unlike primitive data types, which can be compared directly, objects require a more nuanced approach. In this article, we will explore various methods for comparing objects in JavaScript, from simple reference checks to leveraging powerful libraries.

Primitive and Non-Primitive Data Types

Before diving into object comparison, it’s essential to understand the difference between primitive and non-primitive data types in JavaScript.

- Primitive Data Types: These include strings, numbers, booleans, null and undefined. They are compared by value, meaning that two variables holding the same primitive value are considered equal.

- Non-Primitive Data Types: Objects, arrays, and functions fall under this category. They are compared by reference, meaning that two variables are equal only if they point to the same object in memory. This distinction is crucial when comparing objects.

Comparing Objects by Reference

In JavaScript, when you compare two objects using the equality operators (`==` or `===`), you are checking if they reference the same location in memory.

const obj1 = { name: "Alice" };
const obj2 = { name: "Alice" };
const obj3 = obj1;

console.log(obj1 === obj2); // false
console.log(obj1 === obj3); // true

In the example above, ‘obj1’ and ‘obj2’ are two distinct objects with the same content, but they are not equal because they reference different memory locations.

Comparing Objects Using ‘JSON.stringify()’

One common method to compare objects is by converting them to string using ‘JSON.stringify()’:

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

However, this approach has its drawbacks. The order of keys matters in JSON strings, so two objects with the same keys in different orders will not be considered equal:

const objA = { name: "Alice", age: 25 };
const objB = { age: 25, name: "Alice" };

console.log(JSON.stringify(objA) === JSON.stringify(objB)); // false

Additionally, properties that cannot be serialized, such as functions will be lost in this process.

Iterating Over Keys for Comparison

A more reliable method for comparing objects is to iterate over their keys and compare the values:

function areObjectsEqual(obj1, obj2) {
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
 
  // if number of properties are same in both object
  if (keys1.length !== keys2.length) return false;

  // iterate over properties of both object to see if it exist in both
  for (let key of keys1) {
   if (obj1[key] !== obj2[key]) return false;
  }

  for (let key of keys2) {
   if (obj1[key] !== obj2[key]) return false;
  }

  return true;
}

console.log(areObjectsEqual(obj1, obj2)); // true

This method ensures that both the keys and values are compared, providing a more accurate comparison.

Using Libraries like Lodash

For those who prefer not to reinvent the wheel, libraries like Lodash offer built-in functions for deep comparison. The `_.isEqual()` function can handle complex objects and arrays seamlessly:

const _ = require('lodash');
console.log(_.isEqual(obj1, obj2)); // true

Using a library can simplify your code and reduce the chances of errors in your comparison logic.

Conclusion

Comparing objects in JavaScript can be challenging due to the nature of non-primitive data types. We explored several methods, from comparing by reference to using JSON.stringify(), iterating over keys, and leveraging libraries like Lodash. Each method has its pros and cons, and the best choice depends on your specific use case. By understanding these techniques, you can effectively compare objects in your JavaScript applications.

References: