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 to determine if the first object contains equivalent property values to the second object in JavaScript?
In JavaScript, the object contains various properties and methods. For every property, it contains a value. We need to compare the values of the property also to make the comparison between two objects.
Here, we will learn to check if the first object contains all properties that the second object contains and compare the values for every property.
Compare the object property values one by one
The easiest way is to check for every property of the second object that the first object contains or not. If the first object contains that property, compare the values of both.
It means we will compare all properties one by one in this approach.
Syntax
Users can follow the syntax below to check if the first object contains all properties of the second object with the same value in JavaScript.
if (obj1.prop1 === obj2.prop2 && obj1.prop2 === obj.prop2) {
// obj1 contains the all properties of obj2 with equivalent values
} else {
// property values are mismatched
}
In the above syntax, obj1 and obj2 are different objects containing different properties.
Example
In the example below, we have created the obj1 and obj2 objects. We have used the if-else conditional statement to compare the values of all properties of object2 with object1’s property values.
<html>
<body>
<h2>Using the <i>strict equality</i> operator to compare object properties.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let obj1 = {
prop1: "Value1",
prop2: "Value2",
prop3: 40,
prop4: false
}
let obj2 = {
prop1: "Value1",
prop3: 40
}
if (obj1.prop1 === obj2.prop2 && obj1.prop3 === obj.prop3) {
output.innerHTML += "The obj1 contains all properties of obj2 with the equivalent values.";
} else {
output.innerHTML += "The properties or property values of obj1 and obj2 are mismatched.";
}
</script>
</body>
</html>
Use the forEach loop to compare the second object’s property with the first object’s property
In this approach, we will use the JavaScript forEach loop to iterate through all the keys of the second object and match its values with the first object’s equivalent property value. We can get all the keys of the object in the array. After that, we can iterate through the array of keys using the forEach loop.
Syntax
Users can follow the syntax below to use the forEach loop to determine if the first object contains the equivalent property values to the second object.
Object.keys(student2).forEach((key) => {
if (student2[key] !== student1[key]) {
isSame = false;
}
})
In the above syntax, we are comparing the values of every key of the student2 object with the student1 object.
Example
We created student1 and student2 objects containing different properties in the example below. After that, we used the Object.keys() method to get all keys of the student2 object. Next, we used the forEach loop to iterate through all keys of the student2 object.
We compare the key values of the student2 object and student1 object. In the output, we can observe that it prints “Object properties and values are not matched” as the student1 object doesn’t contain the year property.
<html>
<body>
<h3>Using the <i>forEach loop</i> to compare the first object's property values with the second object's property value. </h3>
<div id = "output"></div>
<script>
let output = document.getElementById('output');
let student1 = {
id: "13",
name: "Shubham",
age: 12,
std: 6
}
let student2 = {
id: "13",
name: "shubham",
year: 12,
}
let isSame = true;
Object.keys(student2).forEach((key) => {
if (student2[key] !== student1[key]) {
isSame = false;
}
})
if (isSame) {
output.innerHTML += "Object properties and values are matched."
} else {
output.innerHTML += "Object properties and values are not matched."
}
</script>
</body>
</html>
Using the array.every() method
The JavaScript array.every() method checks whether every element of the array follows a particular condition. For example, we can use the array.every() method to check whether all the array numbers are less than 100.
Here, we will use the array.every() method to check object1 contains every property of object2 with the same value.
Syntax
Users can follow the syntax below to use the array.every() method to determine if the first object contains equivalent property values to the second object or not.
let result = Object.keys(table2).every((key) => table1[key] != undefined && table1[key] === table2[key]);
In the above syntax, if the values for a particular property are undefined, the property doesn’t exist in the object. After that, we compared the property values.
Example
In the example below, the table1 object contains all the properties with equivalent values of the table1 object. We used the Object.keys() to get all keys in the array, and we used the every() method for that array.
We have passed the callback function as a parameter of the every() method, which takes the key as a parameter. So, we are checking that the key exists in the table1 object, and if it exists, does it contains the same value as the table2 object?
If the table1 object contains every key of the table2 object with an equivalent value, it will return true; Otherwise, it will return false.
<html>
<body>
<h3>Using the <i>array.every</i> to compare the first object's property values with the second object's property value.</h3>
<div id = "output"></div>
<script>
let output = document.getElementById('output');
let table1 = {
_id: 76,
colour: "#456754",
size: 30
}
let table2 = {
_id: 76,
colour: "#456754",
size: 30
}
function compareObjectProperties(table1, table2) {
let result = Object.keys(table2).every((key) => table1[key] != undefined && table1[key] === table2[key]);
if (result) {
output.innerHTML += "Object properties and values are matched."
} else {
output.innerHTML += "Object properties and values are not matched."
}
}
compareObjectProperties(table1, table2);
</script>
</body>
</html>
In this tutorial, we learned to check if the first object contains all the properties of the second object with the equivalent values using different methods. The best way is using the array.every() method as it contains a single line of code.
958 Views
