Compare Two Objects in JavaScript

Compare Two Objects in JavaScript | Comparing two objects in JavaScript can be an important task in various applications. It allows you to compare the properties and values of two objects to determine if they are equal or not. In this article, we will explore different methods to compare two objects in JavaScript, including shallow and deep comparison. Also see:- Object.entries() In JavaScript

Shallow Comparison of Two Objects in JavaScript

A shallow comparison only compares the properties and values of an object at the first level. This means that if the two objects have properties that reference other objects, the comparison will not take those properties into account. Here’s an example of a shallow comparison:-

let object1 = { name: "John", age: 30 };
let object2 = { name: "John", age: 30 };
let object3 = object1;

console.log(object1 === object2);
console.log(object1 === object3);

Output:-

false
true

In the example above, the === operator is used to compare the two objects, object1 and object2. The operator returns false because it performs a shallow comparison, and the two objects have different reference values, even though they have the same properties and values.

Deep Comparison of Two Objects in JavaScript

A deep comparison, on the other hand, compares not only the properties and values of an object at the first level but also all its nested properties. Here’s an example of a deep comparison:

let object1 = { name: "John", age: 30 };
let object2 = { name: "John", age: 30 };

function deepEqual(object1, object2) {
  let keys1 = Object.keys(object1);
  let keys2 = Object.keys(object2);

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

  for (let key of keys1) {
    if (typeof object1[key] === "object" && typeof object2[key] === "object") {
      return deepEqual(object1[key], object2[key]);
    } else if (object1[key] !== object2[key]) {
      return false;
    }
  }
  return true;
}

console.log(deepEqual(object1, object2));

Output:-

false

In the example above, a deepEqual() function is defined to compare the two objects, object1 and object2. The function uses recursion to traverse all the properties and nested properties of the objects and compares them. If all the properties and values are the same, the function returns true, indicating that the two objects are equal.

In conclusion, comparing two objects in JavaScript can be a complex task, and the method you use will depend on the level of comparison you need. For shallow comparison, you can use the === operator, while for deep comparison, you can use a custom function like deepEqual(). Whether you’re working on a small project or a large-scale application, being able to compare objects accurately is an essential skill for a JavaScript developer.

If you enjoyed this post, share it with your friends. Do you want to share more information about the topic discussed above or do you find anything incorrect? Let us know in the comments. Thank you!