How to Compare Two Objects in JavaScript

In JavaScript, both == (loose equality) and === (strict equality) compare objects (and arrays, since arrays are a type of object) by reference, not by their content. This means that two objects are only equal if they refer to the same memory location (i.e., the same instance).

Here are three ways to compare two objects in JavaScript:

  1. JSON.stringify()
  2. lodash Library’s isEqual() function
  3. ES6 approach

Method 1: Using JSON.stringify()

JSON.stringify() method converts an object into a string, and comparing strings is more accessible than reaching the whole object.

const f1 = {
 fruit: "Banana"
};

const f2 = {
 fruit: "Banana"
};

// Using JavaScript
let isFruitEqual = (JSON.stringify(f1) === JSON.stringify(f2));
console.log(isFruitEqual); // true

Output

true

In this example, we created two objects, f1, and f2, with the same key-value pair. Then we used the JSON.stringify() function and compare both objects. As a result, we are getting true and printing using the console.log() function.

Method 2: Using lodash’s isEqual()

The _.isEqual() function compares two JavaScript Objects.

import _ from "lodash"

const f1 = {
 fruit: "Banana"
};

const f2 = {
 fruit: "Banana"
};

// Using JavaScript
let isFruitEqual = _.isEqual(f1, f2);
console.log(isFruitEqual);

Output

true

In this example, we created two objects, f1, and f2, with the same key-value pair.

Here we used the isEqual() function provided by the lodash library to compare f1 and f2 objects. Finally, the result we are printing using the console.log() function.

Nested comparison

Using the isEqual() function also, we can perform nested comparisons.

const fruitOne = {
   fruit: 'Banana',
   nutrients: {
   energy: '300kJ',
   minerals: {
     name: 'protein',
   },
  },
};

const fruitTwo = {
  fruit: 'Mango',
  nutrients: {
  energy: '310kJ',
  minerals: {
    name: 'Carbs',
  },
 },
};

// Using JavaScript
let isFruitEqual = _.isEqual(fruitOne, fruitTwo);
console.log(isFruitEqual);

Output

false

Method 3: Using ES6 Approach

To compare two objects in JavaScript (ES6) without using any third-party libraries, you can use a recursive function even when the order of properties is different.

function deepEqual(obj1, obj2) {
 // If both are the same instance
 if (obj1 === obj2) return true;

 // If one of them is null or not an object, return false
 if (typeof obj1 !== 'object' || obj1 === null || 
     typeof obj2 !== 'object' || obj2 === null) {
       return false;
 }

 // Get the keys of each object
 let keys1 = Object.keys(obj1);
 let keys2 = Object.keys(obj2);

 // If they have different number of properties, return false
 if (keys1.length !== keys2.length) return false;

 // Check if every key-value pair in obj1 is the same in obj2
 for (let key of keys1) {
   if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
     return false;
   }
 }

  // If all checks passed, return true
  return true;
}

// Test
let objA = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: '10001'
  }
};

let objB = {
  address: {
    zip: '10001',
    city: 'New York'
  },
  age: 30,
  name: 'John'
};

console.log(deepEqual(objA, objB));

Output

true

That’s it.