How to do Object Comparison in JavaScript?

Comparing object properties and values is something that we need to do sometimes in our JavaScript code.

In this article, we’ll look at how to compare objects in JavaScript.

JSON.stringify

The JSON.stringify method lets us convert a JavaScript object into a JSON string.

Once we converted our object into a string, we can compare the stringified value against another object that’s stringified.

For instance, we can write:

const obj1 = {
  a: 1
}
const obj2 = {
  a: 1
}
console.log(JSON.stringify(obj1) === JSON.stringify(obj2))

We have 2 objects, obj1 and obj2 .

Then we call JSON.stringify on both objects and check for equality with the === operator.

The order of the properties matter since they’re going to stringified in the same order that they are in the object.

Since obj1 and obj2 are the same stringified, then the boolean expression in the last line should be true .

Comparing Each Property of an Object

We can compare each property of the objects that we want to compare.

For instance, we can write:

const obj1 = {
  a: 1
}
const obj2 = {
  a: 1
}

function objectEquals(x, y) {
  if (x === y) {
    return true;
  }

  if (!(x instanceof Object) || !(y instanceof Object)) {
    return false;
  }

  if (x.constructor !== y.constructor) {
    return false;
  }

  for (const p in x) {
    if (!x.hasOwnProperty(p)) {
      continue;
    }

    if (!y.hasOwnProperty(p)) {
      return false;
    }

    if (x[p] === y[p]) {
      continue;
    }

    if (typeof(x[p]) !== "object") {
      return false;
    }

    if (!objectEquals(x[p], y[p])) {
      return false;
    }
  }

  for (const p in y) {
    if (y.hasOwnProperty(p) && !x.hasOwnProperty(p)) {
      return false;
    }
  }
  return true;
}

console.log(objectEquals(obj1, obj2))

In the objectEquals function, we check if x and y are equal with the === operator.

If they’re equal, then we return true .

The next if block checks if either of them isn’t an object literal with the instanceof operator.

If either of them aren’t, then we return false since it’s impossible for them to be the same if either of them isn’t an object.

Next, we loop through the properties of x .

If a property p isn’t an own property of x , then we ignore it with continue .

If y doesn’t have an inherited property that is in x , then they aren’t the same, so we return false .

If x[p] and y[p] are the same, then use continue to check the new property.

If x[p] isn’t an object, we return false since it’s impossible for x and y to be equal if a primitive value isn’t equal.

Then we also have to remember to check the remaining levels of x and y for equality with objectEquals(x[p], y[p]) .

If any of them aren’t equal, then we return false .

Next, we loop through y and check if there are any non-inherited properties in y that isn’t in x .

If there is, then we know they aren’t equal and we return false .

If all the checks pass, then we return true since we know they’re definitely equal in this case.

Conclusion

We can write our own code to compare complex objects, or we can use JSON.stringify to compare 2 objects as JSON strings.