Mastering Deep Equality in JavaScript: A Comprehensive Guide and Implementation

Deep equality comparison is a common task in JavaScript, especially when dealing with complex data structures like objects and arrays. In this blog post, we'll explore how to implement a deep equality function in JavaScript, which can compare nested objects and arrays to determine if they are structurally equivalent.

Let's start by examining the provided code snippet for the isEqual function:

function isEqual(obj1, obj2) {
  // Check if the objects are of the same type
  if (typeof obj1 !== typeof obj2) {
    return false;
  }

  // Check if the objects are arrays
  if (Array.isArray(obj1) && Array.isArray(obj2)) {
    // Compare array lengths
    if (obj1.length !== obj2.length) {
      return false;
    }

    // Compare each element of the arrays
    for (let i = 0; i < obj1.length; i++) {
      if (!isEqual(obj1[i], obj2[i])) {
        return false;
      }
    }

    return true;
  }

  // Check if the objects are non-null objects
  if (
    obj1 !== null &&
    typeof obj1 === "object" &&
    obj2 !== null &&
    typeof obj2 === "object"
  ) {
    // Get the keys of each object
    const keys1 = Object.keys(obj1);
    const keys2 = Object.keys(obj2);

    // Compare the number of keys
    if (keys1.length !== keys2.length) {
      return false;
    }

    // Compare each key and its corresponding value
    for (const key of keys1) {
      if (!keys2.includes(key) || !isEqual(obj1[key], obj2[key])) {
        return false;
      }
    }

    return true;
  }

  // For other types, use regular equality check
  return obj1 === obj2;
}

Now, let's break down the code and understand how it achieves deep equality comparison.

Type Check

The function starts by checking if the types of obj1 and obj2 are the same. If they are not of the same type, the function returns false, indicating that the objects are not equal.

if (typeof obj1 !== typeof obj2) {
  return false;
}

Array Comparison

If both objects are arrays, the function compares their lengths. If the lengths are different, the arrays are considered not equal. If the lengths match, the function recursively compares each element of the arrays.

if (Array.isArray(obj1) && Array.isArray(obj2)) {
  if (obj1.length !== obj2.length) {
    return false;
  }

  for (let i = 0; i < obj1.length; i++) {
    if (!isEqual(obj1[i], obj2[i])) {
      return false;
    }
  }

  return true;
}

Object Comparison

For non-null objects, the function compares the number of keys and then recursively compares each key and its corresponding value.

if (
  obj1 !== null &&
  typeof obj1 === "object" &&
  obj2 !== null &&
  typeof obj2 === "object"
) {
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);

  if (keys1.length !== keys2.length) {
    return false;
  }

  for (const key of keys1) {
    if (!keys2.includes(key) || !isEqual(obj1[key], obj2[key])) {
      return false;
    }
  }

  return true;
}

Other Types

For other types, the function uses a regular equality check (===).

return obj1 === obj2;