Do you really think that loose equals (==) compares the value and strict equals (===) compares the value as well as the type of two variables in JS?

I am sure you must have used loose equals (==) and strict equals (===) in JavaScript while comparing two variables. Have you wondered what is the difference between them?

If you think that loose equals (==) compares the value and strict equals (===) compares the value as well as type of two variables, let me give you a surprise :)

Well, this is a common misconception and even I used to believe the same until I came across the reason behind why this is not correct and if this is incorrect then what is the actual difference between the two.

So the key difference here is that == allows coercion while equality comparison whereas === doesn't allow the coercion.

What the heck is coercion?

Before understanding coercion, let me remind you of type casting first (hope you remember, if not let me tell you that when a value is being converted from one type to another type explicitly, its called type casting.)

There are cases that the conversion happens implicitly because of the enforcement of rules of how a value is used in certain situations, this implicit conversion of a value from one type to another is called coercion.

Now that you have understood coercion, let's see how it makes the difference between == and ===.

If you are comparing two values of the same types, == and === both the operators compare the value and there is no coercion, so the actual game begins when you compare two values of different types.

If you compare two values of different types with strict equals (===), it won't allow any kind of coercion but when you use loose equals (==), type of one or both the values will be implicitly coerced as a result of which they will become the same in type after which the comparison takes place.

Let's see an example to understand...

let a = 7;
let b = "7";

a === b; 
a == b;

What do you think the output will be?

false
true

In the above example we have two values of different types and we are comparing them with strict equals (===) and loose equals (==).

In the first case, the result of the comparison turns out to be false because they are not same in type however the result turns out to be true in the second case as the coercion takes place and both the values become same in type.

Now the question arises, which value actually coerced?

According to ES5 specifications,

1. If Type(x) is Number and Type(y) is String, return the result of the comparison x == ToNumber(y).
2. If Type(x) is String and Type(y) is Number, return the result of the comparison ToNumber(x) == y.

So in our case, we can say that "7" coerced to a number for comparison.

The coercion happens differently for different combination of types as mentioned in ES5 specifications section 11.9.3 (Abstract Equality Comparison Algorithm)

I hope this helps in understanding the real difference between loose equals and strict equals comparison. If it does, please share it with your friends and colleagues, like the post and let me know your thoughts in the comment section.

Happy coding!