What is object equality in JavaScript ?

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.

== operator:

Javascript

let a = 1;
let b = 1;
console.log(a == b); // true
let c = 10;
let d = "10";
console.log(c == d); // true


const name1 = {
    first_name: "sarah",
};

const name2 = {
    first_name: "sarah",
};

console.log(name1 == name2); // false

Output

true
true
false

 === operator:

Javascript

let a = 1;
let b = 1;

console.log(a === b); // true
let c = 10;
let d = "10";

console.log(c === d); // false

const name1 = {
    first_name: "sarah",
};

const name2 = {
    first_name: "sarah",
};

console.log(name1 === name2); // false

Output

true
false
false

 object.is() Method:

Javascript

let a = 1;
let b = 1;

let c = 10;
let d = "10";

console.log(Object.is(c, d)); // false
console.log(Object.is(a, b)); // true
console.log(Object.is(a, a)); // true

const name1 = {
    first_name: "sarah",
};

const name2 = {
    first_name: "sarah",
};

console.log(Object.is(name1, name2)); // false
console.log(Object.is(name1, name1)); // true

Output

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)

Output

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)

Output

true
false