Shallow vs. Deep Comparison in JavaScript

In JavaScript, the equality of operands can be assessed at different levels. It’s fundamental to compare two operands in terms of data type, size, or reference, especially in JavaScript and React. One crucial concept in this context is shallow comparison.

What is Shallow Comparison?

Shallow comparison is a way to compare two objects or arrays by comparing only their immediate of top level values, rather than comparing their entire nested structure. In other words, a shallow comparison only looks at the first level of an object or array, and does not compare any nested objects or arrays. In JavaScript, shallow comparison is performed using the triple equals operator (===).

The concept of the “first level” depends on whether you’re dealing with primitive JavaScript values (basic data types representing immutable single values) or arrays/objects.

Primitive JavaScript Values: When comparing two primitive values using ===, the operator checks if they are of the same type and have identical values.

Arrays or Objects: When comparing objects or arrays using ===, the operator checks whether they share the same reference in memory rather than comparing their contents.

Shallow Comparison Use Cases in React

React is known for its efficient rendering, and shallow comparison plays a crucial role in optimizing component rendering while avoiding unnecessary re-renders.

React employs shallow comparison to evaluate changes in state and props. It checks if the top-level values or memory references have changed. If they differ, React assumes that the state or props have been modified, prompting a re-render. This approach helps React determine whether a component should update when it receives new props or state, ultimately enhancing performance by avoiding redundant re-renders.

Deep Comparison

Deep comparison, as opposed to shallow comparison, involves a more thorough examination of the nested structure of objects or arrays. Comparing not only the top-level properties but also going through nested objects or arrays ensures that the entire structure is identical. It considers both the values and the structure of the data for comparison.

It does not rely on a dedicated operator but instead follows a series of steps to perform the comparison. These steps involve evaluating multiple parameters, including data types, the length of properties, the uniqueness of properties, and the values at various nested levels.

Deep comparison is used in a thorough examination of complex data structures where it is required to ensure data accuracy, consistency, and to make informed decisions based on changes within those data structures. It goes beyond re-rendering considerations and serves as a tool for data validation, integrity, and synchronization in a wide range of applications.

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

  // If both objects are primitive values, compare their values using ===
  if (typeof obj1 !== "object" || obj1 === null || obj2 === null) {
    return obj1 === obj2;
  }

  // Check if both objects have the same number of properties
  const keys1 = Object.keys(obj1);
  const keys2 = Object.keys(obj2);
  if (keys1.length !== keys2.length) {
    return false;
  }

  // Recursively compare the properties of the objects
  for (const key of keys1) {
    if (!keys2.includes(key) || !deepEqual(obj1[key], obj2[key])) {
      return false;
    }
  }

  return true;
}

const obj1 = {
  course: "tailwindcss",
  age: 30,
  contacts: {
    email: "user1@example.com",
    phone: "123-456-7890",
  },
};

const obj2 = {
  user: "tailwindcss",
  age: 30,
  contacts: {
    email: "user2@example.com",
    phone: "123-456-5432",
  },
};

console.log(deepCheck(obj1, obj2)); // false (obj1 and obj2 have the same structure but different value at deep level)

In this example, the deepCheck function recursively compares the properties of two objects, ensuring that not only the top-level properties but also their nested properties are identical. The function checks data types, property counts, and recursively compares nested objects. This level of comparison is considered deep because it explores the entire structure of the objects.

The comparison between obj1 and obj2 returns false due to differences in nested properties in spite of having same structure.