Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to compare two objects in JavaScript?
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 compare 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>
23K+ Views
