Comparing Objects In JavaScript With A Recursion Function

Question

Can someone walk me through the recursion function in this code?, !deepEqual(a[key], b[key]). How it compares its values every time it is called?...

function deepEqual(a, b) {
  if (a === b) return true;
  
  if (a == null || typeof a != "object" ||
      b == null || typeof b != "object") return false;

  let keysA = Object.keys(a), keysB = Object.keys(b);

  if (keysA.length != keysB.length) return false;

  for (let i = 0; i <= keysA.length -1; i++) {
     let key = keysA[i];
    if (!keysB.includes(key) || !deepEqual(a[key], b[key])) return false;
  }

  return true;
}

let obj = {here: {is: "an"}, object: 2};
console.log(deepEqual(obj, obj));
// → true
console.log(deepEqual(obj, {here: {is: "as"}, object: 3}));
// → false
console.log(deepEqual(obj, {here: {is: "an"}, object: 2}));
// → true

I really need to understand how the recursion function loop get through the second call without returning true on the first check and false on the second check for if (a == null || typeof a != "object" || b == null || typeof b != "object") return false;

Because the value of !deepEqual(a["is"], b["is"])) == !deepEqual("is", "is")) and thus should return true; on the first check for if (a === b) return true;. and return false; on the second check for if (a == null || typeof a != "object" || b == null || typeof b != "object") return false; because its not an object.

wont that stop the function from completing the check for the remaining properties?

can anyone make this clear enough for me?

let obj = {here: {is: "an", that: "at", name: "ola", here: {is: "as"}, object: 2};
console.log(deepEqual(obj, obj));
// → true
console.log(deepEqual(obj, {here: {is: "an", that: "at", name: "ola", here: {is: "as"}, object: 3}));
// → false


//The only different property value is in the second argument's last property. 

Answer 1

It's pretty straightforward, let's walk through this piece of code using the example in your questions.

console.log(deepEqual(obj, obj));

In the above case you're comparing the same object which in turn refers to same memory location, hence if (a === b) return true; gets executed and true is returned.

console.log(deepEqual(obj, {here: {is: "as"}, object: 3}));

In this example, since you're are comparing two different objects i.e, different memory locations therefore,

1. a === b is false; now we move forward to compare the values of object keys.
2. a == null... condition is also satisfied hence move forward
3. keys length are same so we go inside the for loop
4. for key = here obj.here is an object and keysB includes here; hence deepEqual(a[here], b[here]) is executed; and step 1 and 2 returns false
5. Now inside for loop deepequal a["is"] == b["is"] which returns true.
6. The same is repeated for a["object"] == b["object"] which is not true, but a == null ||... get's executed and hence returns false.

console.log(deepEqual(obj, {here: {is: "an"}, object: 2}));

for this, all the steps in 2nd example get executed the same way buy in the 6th step a["object"] == b["object"] get's executed and hence you get true.

Hope this clears all the steps.