JavaScript Tips and Tricks: Compare Objects in Detailed

Tips and Tricks in JavaScript That Will Raise Your Level.

Photo by Vlado Paunovic on Unsplash

In JavaScript, you can compare two objects by comparing their properties and values. However, there are two types of object comparison: shallow comparison and deep comparison.

Shallow comparison compares the object references (memory addresses) and returns true only if both objects refer to the same location in memory. Deep comparison, on the other hand, compares the properties and values of the objects and returns true if they are equal.

Let’s write together an example of a function that performs a deep comparison between two objects in JavaScript:

ffunction areObjectsEqual(firstObject, secondObject) {
 // Check if the objects have the same number of properties
 if (Object.keys(firstObject).length !== Object.keys(secondObject).length) {
  return false
 }

 // Check if the properties and values of the objects are equal
 for (let key in firstObject) {
  if (firstObject.hasOwnProperty(key)) {
   if (!secondObject.hasOwnProperty(key)) {
    return false
   }
   // Check if the type of the properties is object.
   if (
    typeof firstObject[key] === "object" &&
    typeof secondObject[key] === "object"
   ) {
    if (!areObjectsEqual(firstObject[key], secondObject[key])) {
     return false
    }
   } else if (firstObject[key] !== secondObject[key]) {
    console.log("true")
    return false
   }
  }
 }

 return true
}

This function takes two objects as arguments and first checks if they have the same number of properties. If they do, it then iterates over each property of the first object and checks if the second object has the same property. If it does, it compares the property values of both objects. If any of the properties or their values are not equal, the function returns false. Otherwise, it returns true.

Here is an example of how we can use this function to compare two objects:

let obj1 = { a: 1, b: 2, c: { d: 3 } }
let obj2 = { a: 1, b: 2, c: { d: 3 } }
let obj3 = { a: 1, b: 2, c: { d: 4 } }

console.log(areObjectsEqual(obj1, obj2)) // true
console.log(areObjectsEqual(obj1, obj3)) // false