Comparing Objects

Open the project folder

Starter file example

We just learned that a primitive is stored by a value, and an object type is stored as a reference. This will help us better understand the behaviour we are now going to see when comparing objects for equality.

To start we have two simple objects with the same properties:

const laptop1 = {
  brand: 'Apple',
  model: 'Macbook Pro',
};
const laptop2 = {
  brand: 'Apple',
  model: 'Macbook Pro',
};

We are going to use these to compare equality. From a sensible guess, you would think comparing these would always result in true, they have the same keys of brand and model, and the values are the same too.

Comparison with primitives is simple:

console.log(1 === 1); // true

Since primitives have their own unique value stored in memory, comparing the values works as you may expect. Objects are a little less obvious. As you may expect, comparing the same object results in true:

console.log(laptop1 === laptop1); // true

But change this to compare laptop1 and laptop2:

console.log(laptop1 === laptop2); // false

And even though these two objects have the exact same contents, they are not considered equal.

Comparing reference types

The reason is because these are reference types. Remember, a reference type variable points to a location in memory, not the actual value. We are not comparing the contents of the objects, instead we are comparing two different memory locations, and therefore the comparison is false.

We also see the same result using the Object.is() method, as this is also comparing reference:

console.log(Object.is(laptop1, laptop2)); //false

Going back to what we looked at previously, what do you think will happen if we copy an object?

Let’s make a copy of laptop1 and see:

const laptop1 = {
  brand: 'Apple',
  model: 'Macbook Pro',
};
const laptop2 = {
  brand: 'Apple',
  model: 'Macbook Pro',
};
const laptop3 = laptop1;

console.log(laptop1 === laptop3); // true

This is true because when we created laptop3, we did not copy the contents of laptop1, we instead copied a reference to the same object in memory.

Regardless of how all these variables are stored behind the scenes we still need a way to compare the properties of two objects. We need a way to compare laptop1 and laptop2, which results in true.

Using JSON.stringify()

One way to do this is to use a JSON method called stringify(). We will look more into JSON later, but stringify is a way to convert an object into a string:

console.log(JSON.stringify(laptop1));

This converts our object to text:

{"brand":"Apple","model":"Macbook Pro"}

A string of text is much easier to compare now:

console.log(JSON.stringify(laptop1) === JSON.stringify(laptop2)); // true

This comparison is true since the contents of the objects are the same. An issue we have now is the properties must be in the same order or the strings will be different. For simple objects like this, we could do things manually and compare each property:

function checkEquality(obj1, obj2) {
  return obj1.brand === obj2.brand && obj1.model === obj2.model;
}
console.log(checkEquality(laptop1, laptop2)); // true

Another option is making use of Object methods to access the keys and values. We looked at these in the looping with objects section:

console.log(Object.keys(laptop1));
console.log(Object.values(laptop1));

We would then need to extend our function to loop through one objects keys and values, and compare them with another objects keys and values to see if they match. This means the order of properties is not important, as it is with the stringify method.

As you can see, object types can be a complex thing if you don’t understand how they are handled in JavaScript.