JavaScript — Double Equals vs. Triple Equals | by avoid404 | Medium

The Big Question

What is the difference between ‘==’ and ‘===’. This is the most basic concept of JavaScript but still people find it difficult to understand. Is the difference only type checking or is it something more. To understand this, we have to read the spec of ECMAScript.

Triple Equals (Strict Equality)

Let's go through the spec for Strict Equality. I have found that solving problems is the best possible way to learn so let's try and answer some questions from the above information.

Hopefully, most of you would have got Line 1 and 2 right. But in Line3, JS does something different from the norms. NaN when compared with itself is not equal 🤯 .
If we look closely at the spec, in Line 4.a and 4.b, we find out that if either value is NaN it will always return false. Weird, right? Let’s look at something even weirder.

+0 === -0 // true

+0 is equal to -0. So does that mean they represent same thing? The answer is NO! ABSOLUTELY NOT!!. They are not the same value, but for strict equality JS considers them equal, which I think is 100% Wrong!. I will post about this nuance in another post, for now let’s get back to the topic.

FUN FACT: To confirm they are not same, you can check Object.is(+0, -0).

From the spec we can conclude the following things:

1. If the types are different, then this will always return false.
2. It checks the exact value for both LHS and RHS (except in certain cases).

Double Equals (Abstract Equality)

After Reading this, we know that “==” also checks type of the values. “Double Equals checks the value and Triple Equal Checks both type and value” is just a wrong notion and this happens because many books, blogs and tutorials out there will be using this exact same sentence and they are 100% wrong. So people never follow a post or blog mindlessly.

“ Always Read The Spec”

What the Spec tells us is that if the types are not equal, JS will try to “coerce” them into the same type, if it can.

If even one of the value is number it will try to coerce the other type to number also.

2 == '2'; // gets converted to
2 == 2; // now since type are equal we perform triple equality check
2 === 2; // true

In the above example, we see that we see that the string “2” gets converted to Number 2. Then it agains call the “==” operator and now since the type are equal performs triple equality checks.

1 == true; // true
0 == false; // true
'' == 0; // true

In the above example,

1. In Line 1, JS converts true to Number which returns 1. Then it checks 1== 1, and returns true.
2. In Line 2, JS converts false to Number which returns 0. Then it checks 0== 0, and returns true.
3. In Line 3 JS converts “” string to Number which returns 0. Then it checks 0== 0, and returns true.

Now we get into some of the corner case of Double Equals. What do you think the output would be of these lines.

If your answer was TRUE, TRUE, FALSE. Congratulations you have better understanding of double equals then most JS developers out there.
For those of you who got it wrong, be happy because you are going to learn something new. And that is the whole point of this blog.

1. In Line1, JS tries to convert “[]” into a primitive type, and converts array to an empty string “”. Now it checks “” == “” which will return true.

2. In Line2, JS tries to convert “[[]]” into a primitive type, and converts array to an empty string “”(Remember the depth does not matter, if the array has empty value). Now it checks “” == “” which will return true.

3. But why isn’t [] == [[]] since they both are “== ‘’ ”. Try reading spec again, I’ll wait. Yes!!, you missed Line 1 which tells us that if the types are equal we perform strict equality and the values are not equal in that case.

If you think, it is easier to use “===” than “==”, since we don’t have to worry about all the coercion rules, then you couldn’t have been more wrong my friend. You should always know why something is happening, this will not only increase your knowledge of JS but will also help you write better code.

So we now have a better understanding of how Double Equality and Triple Equality works.

Key Takeaways

1. As you’ve seen, that we can use “==” if we want to coerce some values and check if they are same or not. We should know the types that our variables will have to avoid falling into pitfalls.

2. Triple Equals is in now way superior to Double Equals, both have some positives and some negatives, we should try to avoid these.

Conclusion

Try to read more about coercions, it will certainly help you in knowing why there are pitfalls of using ‘==’. Do not blindly use ‘===’ always just because everyone is using it. Try to go into details about minor things as well because you never know, what new things you will learn.