Strict Equality Comparison

Introduction

Have you ever gotten unexpected results when comparing two values?

Presentation

In this post I want to try to explain why it is preferable to use the === (strict equality operator) rather than == (value equality operator). I will do it with some examples that I hope will be useful to you in the future.
Content

Type coercion

Before starting with the examples, I want to introduce the concept of type coercion. Type coercion is the process of automatically converting a data from one type to another during the execution of an operation. In some cases, in fact, Javascript can try to perform a conversion to ensure that the types of the two values are equal.

Comparing different data types

So, … do you know why when we compare the values 1 number and '1' string it is true while the strict equality comparison of the same values instead is false? This is because the equality operator and the strict equality operator handle type coercion differently. The value equality operator performs the conversion before comparing the two values, while the strict equality operator does not perform any conversion.

const number = 1;
const string = ‘1’;

console.log(number == string); // true
console.log(number === string); // false

Comparing two objects

Let's now try to compare two objects. We can guess that the strict equality operator will return false but it is a little less intuitive that the value equality operator also returns false. Even if the two objects have the same values, they refer to different objects. That's why they are not equal.

const first = { foo : “bar” };
const second = { foo : “bar” };

console.log(first == second); // false
console.log(first === second); // false

null and undefined types

Even if on two legs I can't think of a case where two variables can have these two values, it is important to know what happens in front of the value equality and strict equality operators. With the value equality operator, null and undefined are equal. If we use the strict equality operator, the comparison result is false because we are actually comparing two different data types.

console.log(null == undefined); // true
console.log(null === undefined); // false

Booleans and numbers

Do you know what happens when javascript compares a number with a boolean? With the value equality operator, true is converted to a number, that is 1, and therefore the comparison with 1 is equal to true. If, for example, we compare true with another number, then we will get false. In the case of the strict equality operator, the comparison will always be false because we are comparing a boolean with a number.

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

Conclusion

I hope these examples have helped you understand why it is preferable to use the strict equality operator instead of the value equality operator. Using the strict equality operator avoids the type coercion process and makes the comparison more predictable. Remember, always use the strict equality operator unless you have a good reason not to.

Here you can find youtube video with the same content, subtitled in english