JavaScript provides us with a number of ways to check if two objects are equal. Let us demonstrate how to check whether two objects are equal.
There are three types of equality –
- Referential equality.
- Shallow equality.
- Deep equality.
Referential equality: We can say two objects are referentially equal when the pointers of the two objects are the same or when the operators are the same object instance.
We can check referential equality in 3 ways:
- === (triple equals) operator or the strict equality operator. Strictly equality refers to the equality of two values. If the two values have the same type, they are considered equal.
- == (double equals) is the loose equality operator. It converts both values to a common type and then checks for equality.
- object.is() function.
Javascript
let a = 1;let b = 1;console.log(a == b); // truelet c = 10;let d = "10";console.log(c == d); // trueconst name1 = { first_name: "sarah",};const name2 = { first_name: "sarah",};console.log(name1 == name2); // false |
true true false
Javascript
let a = 1;let b = 1;console.log(a === b); // truelet c = 10;let d = "10";console.log(c === d); // falseconst name1 = { first_name: "sarah",};const name2 = { first_name: "sarah",};console.log(name1 === name2); // false |
true false false
Javascript
let a = 1;let b = 1;let c = 10;let d = "10";console.log(Object.is(c, d)); // falseconsole.log(Object.is(a, b)); // trueconsole.log(Object.is(a, a)); // trueconst name1 = { first_name: "sarah",};const name2 = { first_name: "sarah",};console.log(Object.is(name1, name2)); // falseconsole.log(Object.is(name1, name1)); // true |
false true true false true
Shallow equality:
- A shallow equality check of objects returns the list of properties of both objects and further checks if the properties are equal.
- Shallow equality is a type of equality that occurs when the key values in both objects are equal.
Example: In this example, the shallowEqual function compares the properties of obj1 and obj2. Since both objects have the same properties “a” and “b” with the same values, the function returns true for the comparison of obj1 and obj2
Javascript
function shallowEqual(obj1, obj2) { const keys1 = Object.keys(obj1); const keys2 = Object.keys(obj2); if (keys1.length !== keys2.length) { return false; } for (let key of keys1) { if (!obj2.hasOwnProperty(key) || obj1[key] !== obj2[key]) { return false; } } return true;}const obj1 = { a: 1, b: 2 };const obj2 = { a: 1, b: 2 };const obj3 = { a: 1, b: 2, c: 3 };console.log(shallowEqual(obj1, obj2));// Output: true (Both objects have the same properties and values)console.log(shallowEqual(obj1, obj3));// Output: false (obj1 and obj3 have different number of properties) |
true false
Deep equality:
- Deep equality is a recursive shallow equality check.
- If the properties are objects, then the check is performed recursively on these objects.
Example: In this example, the deepEqual function compares obj1 and obj2 deeply, including nested properties. Since both objects have the same property “a” with the same values, and nested property “c” with the same value, the function returns true for the comparison of obj1 and obj2
Javascript
function deepEqual(obj1, obj2) { if (obj1 === obj2) { return true; } if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) { return false; } const keys1 = Object.keys(obj1); const keys2 = Object.keys(obj2); if (keys1.length !== keys2.length) { return false; } for (let key of keys1) { if (!obj2.hasOwnProperty(key) || !deepEqual(obj1[key], obj2[key])) { return false; } } return true; } const obj1 = { a: 1, b: { c: 2 } }; const obj2 = { a: 1, b: { c: 2 } }; const obj3 = { a: 1, b: { c: 3 } }; console.log(deepEqual(obj1, obj2)); // Output: true (Both objects have the same properties //and nested properties with the same values) console.log(deepEqual(obj1, obj3)); // Output: false (The nested property "c" //has different values in obj1 and obj3) |
true false
