How to compare two objects in JavaScript?

Javascript Web Development Front End Technology

Objects in JavaScript is an entity, where it consists of properties and type. Let’s consider sports as an object, in Car the properties can be color, price, height, width, etc. Exactly the same also happens in JavaScript, which has objects and contains properties to them.

Const car = {
   color : ‘Black’,
   price : 2500000,
   height : ‘6 feet’,
   width : ‘5 feet’
}

The equality operator (===) verifies whether the two operands are equal or not and returns a Boolean value. If the both operands are of different types, this operator return false else it returns true.

document.write(‘tutorix’ === ‘tutorix’);
Output: true
document.write(‘tutorialspoint’ === tutorialspoint);
Output: false

In this article, we are going to discuss how to compare two objects in JavaScript

Using the JSON.Stringify() method

We cannot just implement “==” or “===” operator to compare two objects. The better way to do the comparison is to use JSON.Stringify and compare the objects.

Example 1

The following example demonstrates the comparison of two objects in JavaScript using the JSON.stringify() method.


<!DOCTYPE html>
<html>
   <title>Comparing two objects</title>
<head>
   <script>
      const Fruit1 = { fruit: 'kiwi' }; // Creating Fruit1 object
      const Fruit2 = { fruit: 'kiwi' }; // Creating Fruit2 object
      
      // Performing JSON.Stringify and === operator
      document.write(JSON.stringify(Fruit1) === JSON.stringify(Fruit2));
   </script>
</head>
<body>
</body>
</html>

Example 2

Deep nested comparison

In this example, we have implemented comparison of objects using JSON.Stringify() and “===” operator. And we’ve added more types of properties into the object. In this below example we are performing deep nested comparison.


<!DOCTYPE html>
<html>
   <title>Comparing two objects (Deep Nested Comparision)</title>
<head>
   <script>
      const cricketer1 = {
         name: 'Dhoni',
         Career_Stats: {
            runs: 10549,
            ipl: {
               Trophies: 3,
            },
         },
      };
      const cricketer2 = {
         name: 'Dhoni',
         Career_Stats: {
            runs: 10549,
            ipl: {
               Trophies: 3,
            },
         },
      };
      // Using JavaScript
      document.write(JSON.stringify(cricketer1) === JSON.stringify(cricketer2)); // true
   </script>
</head>
<body>
</body>
</html>

Example 3

Including different parameters

In this example, we used JSON.Stringify and “===” to comapare two objects. Here in the below program we are including different parameters in both the arrays. It will return false as the parameters are different in both the objects.


<!DOCTYPE html>
<html>
   <title>Comparing two objects (Different parameters)</title>
<head>
   <script>
      //Creating person1 object
      const person1 = {
         name: 'Dhoni',
         age: 41,
         role: 'Batsmen',
         runs: 104549,
      };
      
      //Creating person2 object
      const person2 = {
         name: 'Kohli',
         age: 34,
         role: 'Batsmen',
         runs: 12178,
      };
      
      // Comparing using JSON.Stringify and "==="
      document.write(JSON.stringify(person1) === JSON.stringify(person2)); // It will return FALSE
   </script>
</head>
<body>
</body>
</html>

Example 4

Changing the order of properties in object

In this example, we used JSON.Stringify and “===” operator to compare the objects. Here we’ve changes the order of properties in object, it will return false as they are not in the same order.


<!DOCTYPE html>
<html>
   <title>Comparing two objects (Order changed)</title>
<head>
   <script>
      //Creating person1 object
      const person1 = {
         name: 'Dhoni',
         age: 41,
         role: 'Batsmen',
         runs: 104549,
      };
      
      //Creating person2 object
      const person2 = {
         name: 'Dhoni',
         age: 41,
         runs: 104549,
         role: 'Batsmen',
      };
      
      // Comparing using JSON.Stringify and "==="
      document.write(JSON.stringify(person1) === JSON.stringify(person2)); // It will return FALSE
   </script>
</head>
<body>
</body>
</html>

Using Loadash_.isEqual

The _.isEqaul is property of lodash which is used to compare JavaScript objects. It is used to know whether two objects are same or not. For ex, there are two arrays with equal number of elements, properties and values are also same. Even the properties are not in same order it will return true.

Syntax

_.isEqual(obj1, obj2);

Example 1

With jumbled values

In this example, we used _.equal function to know whether they are same or not. It will return true even if the properties and values are same but in jumbled order.


<!DOCTYPE html>
<html>
   <title>Comparing two objects (Using _.isEqual function)</title>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
   </script>
</head>
<body>
   <script type="text/javascript">
   
      //Creating Person1 object
      var person1 = {
         name: 'Dhoni',
         Age: 41,
         Trophies: [2007, 2011, 2013]
      };
      
      //Creating Person2 object
      var person2 = {
         name: 'Dhoni',
         Trophies: [2007, 2011, 2013],
         Age: 41
      };
      //Performing _.isEqual function
      document.write(_.isEqual(person1, person2));
   </script>
<body>
</head>
</html>

Example 2

With different values in both objects

In this example, we follow _.isEqual() function to perform on objects whether they’re same or not. Here we’ve included a situation where the properties and values are different in objects.


<!DOCTYPE html>
<html>
   <title>Comparing two objects (Using _.isEqual function)</title>
<head>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js">
   </script>
</head>
<body>
   <script type="text/javascript">
      
      //Creating person1 object
      var person1 = {
         name: 'Dhoni',
         Age: 41,
         Trophies: [2007, 2011, 2013]
      };
      
      //Creating person2 object
      var person2 = {
         name: 'Kohli',
         Trophies: [],
         Age: 34,
      };
      document.write(_.isEqual(person1, person2));
   </script>
</body>
</html>