How to Check If Two Objects are Equal in JavaScript

To check if two objects are equal in JavaScript:

  1. Use JSON.stringify()
  2. Using lodash Library’s isEqual() function

In JavaScript, comparing primitive values is relatively easy as compared to objects. We compare two primitive values with the help of an equality operator. For example:

"X" == "Y" //false
2 == 2 //true

Comparing objects in JavaScript is challenging because objects are structured data. In this post, we will learn to compare whether two objects in JavaScript are equal or not.

As we know, JavaScript references are object types, so we cannot use equality operators ( === and ==) directly to compare two objects.

Let’s use above mentioned methods to check if two objects are equal in JavaScript.

Using JSON.stringify()

The JSON.stringify() is a built-in JavaScript method that can convert an object into a string, and then comparing strings is more accessible than reaching the whole object.

Syntax

JSON.stringyfy(objectName);

Arguments

It takes an object name as the parameter. Then, the stringify() method converts the entire object into a string data type, and after that, it compares the two strings as a string. However, it should be noted that for two different objects to be treated as equal, all the key-value pairs should be equal. Otherwise, the comparison will return false.

On the other hand, another function called isEqual() takes care of the fact that within two different objects, even if the order of the key-value pair is not the same, they are equal.

Return value

It returns boolean values, which can either be true or false. For example, if two objects are equal, the output is shown boolean true, and if the objects are not equal, the output is false.

Example

const f1 = {
 fruit: "Banana"
};

const f2 = {
 fruit: "Banana"
};

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

Output

true

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

Nested Comparison of Objects in JavaScript

To compare nested objects in JavaScript, use the JSON.stringify() method.

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

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

// Using JavaScript
let isFruitEqual = (JSON.stringify(fruitOne) === JSON.stringify(fruitTwo));
console.log(isFruitEqual);

Output

true

Using lodash Library isEqual() function

Lodash is a lightweight library of JavaScript. Using the lodash isEqual function is another way to compare two JavaScript Objects. Let’s look at some examples to understand the working of the isEqual() function.

Syntax

_.isEqual(obj1, obj2);

Arguments

The isEqual() function has two parameters, obj1, and obj2. So these are two objects that we need to compare.

Return value

It returns the Boolean (true or false) value.

Example

import _ from "lodash"

const f1 = {
 fruit: "Banana"
};

const f2 = {
 fruit: "Banana"
};

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

Output

true

We created two objects, f1 and f2, with the same key-value pair in this example. Here we use 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. Let’s understand by example.

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

Which method is better to use?

Usually, the key-value pairs are not in the sorted order because they do not need such order or sorting like in arrays, lists, etc., where sorting helps in many operations.

The JSON.stringyfy() will have to transverse the whole object to make the comparison.

On the other hand, the loadash will need less time in most cases because even if there is one mismatching, then the function will end the current comparison and return false.

Manual comparison

We can read the properties of two JavaScript objects and then compare them manually. Let’s understand by an example:

function isBoxSizeSame(box1, box2) {
 return box1.size === box2.size;
}
const box1 = {
 size: '15*15'
};
const box2 = {
 size: '15*15'
};
const box3 = {
 size: '25*15'
};
console.log(isBoxSizeSame(box1, box2));
console.log(isBoxSizeSame(box1, box3));

Output

true
false

We created a function that accepts two box objects and compares them using a simple equality operator in this example. After that, we print the boolean result by using the console.log() function.

That’s it for this tutorial.

See also

How to Get Index of an Object in Array in JavaScript

How to filter an array with multiple conditions in JavaScript

How to Convert Object to Array of Objects in JavaScript

Leave a Comment