Understanding "==" and "==="
A deep dive on comparison operators of JavaScript language
I am a web developer learning and building amazing products.
Name of the operators
From the complex specifications of Js language, we will try to deep dive into these two comparison operators “==” and “===”. But first, let’s know the names so the operator with two equal signs is known as “abstract equality comparison” and the one with three equal signs is known as “strict equality comparison”. Now that we are familiar with the names let's try to understand what they do.
What do they do?
The comparison operators are used to compare two values and see if they are equal or not. But there is a misconception that “==” abstract equality only checks the value of the operands for comparison and that “===” strict equality checks both type and value for comparison. But in reality, both “===” strict equality and “==” abstract equality checks both type and value for comparison but the only difference is that the abstract equality performs coercion (type conversion) before comparing the values if the types are not the same.
Strict Equality Comparison
When we compare with the “===” strict equality operator the steps it follows for comparison are:
It checks the type if they are not the same it returns false else
If the types are the same it checks the value for comparison
If the values are equal it returns true else returns false
Example for strict comparison
// first
10 === 10 //true
//second
"100" === 100 //false
//third
NaN === NaN //false
In the first example both the operands are of type number and the values are also equal so it returns true. In the second example, it would return false since types are not the same and it will not go to the step where it checks value. Coming to the third example we have NaN in both the operands even though they are of the same type they would return false because in JavaScript NaN is the only value which is not equal to itself.
Abstract Equality Comparison
In the case of “==” abstract equality, it acts in the following way:
At first, it checks the type of both the operands and if the types are the same then the operation follows the above steps of strict equality comparison
And if the types are not the same it performs coercion and changes the type of the operands to a number for primitive values.
After coercion, it then checks the value and returns true if they are equal else returns false.
Number conversion rules
The following table contains info about how each type of value is converted to a number type. we are not including non-primitive types and how they are compared let's keep that for another blog.
| Value | Returns |
| Undefined | NaN |
| Null | 0 |
| Boolean | 1 if true and 0 if false |
| String | 0 if empty " " string, if the string contains only a number then it is converted to that number, else if it cannot change the string to a valid number then it returns NaN |
Example for abstract comparison
//first
9 == "9" //true
//second
true == 1 //true
//third
"fifty" == 50 //false
In the first example we have a string “9” and a number 9 now when we use the abstract equality operator the string is converted to the number 9 and when it compares values both are equal and hence return true. In the second one, we have a Boolean true and number 1, the true value is converted to a number which returns 1 and then when values are compared it returns true. And in the third one, we have a string “fifty” and a number 50 so the string "fifty" cannot be converted to a valid number so it returns NaN and hence comparing the values returns false.
Conclusion
To conclude we can see that both "==" and "===" check type and value for comparison but the "==" performs coercion if the values are not the same and the "===" will not check for values if the types do not match.