All of us use "==" daily for performing the comparison in JavaScript to execute particular code block only when certain condition meets.
But do you know how "==" actually works in JavaScript?
In JavaScript "==" compare number values instead of boolean values by performing implicit coercion.
Here is a simple example :
const a = 10;
if(a == "10"){
console.log("Woo! Condition is true.");
}
In above block of code we're comparing string value of "10" with a integer value of const variable a which is 10.
So here, JavaScript will first perform implicit coercion on non-number type value i.e. "10" and will convert it into a number and then perform comparsion.
Why you should avoid comparison of boolean values with "=="?
We are now aware of the fact that "==" compare integer value type not boolean type.So comparing boolean values with "==" will not give desired result to you every time.
Examples of Wrong Implementation for value check :
Example 1
const a = 10;
if(a == true){
console.log("Condition is true.");
}else{
console.log("Condition is false.");
}
Number equivalent of true is 1.
False : 10 is not equal to 1.
Example 2
const a = "1";
if(a == true){
console.log("Condition is true.");
}else{
console.log("Condition is false.");
}
Number equivalent of true is 1 and a is 1.
True : 1 is equal to 1.
Examples of Correct Implementation for value check :
Example 1
const a = 10;
if(a){
console.log("Condition is true.");
}else{
console.log("Condition is false.");
}
True : Because the boolean equivalent of a is true.
Example 2
const a = "1";
if(a){
console.log("Condition is true.");
}else{
console.log("Condition is false.");
}
True : Because the boolean equivalent of a is true.
Example 3
const a = "";
if(a){
console.log("Condition is true.");
}else{
console.log("Condition is false.");
}
False : Because the boolean equivalent of a is false.
Conclusion
Try to avoid using boolean values comparison with "==". It will work for you in many cases but it is not a right way to perform a condition check.
Top comments (11)
You should read up on JavaScript equality - it's a very important concept. Much of what you said here is correct but you didn't even touch on the
===operator which is usually more acceptable to use than the flawed==operator.developer.mozilla.org/en-US/docs/W...
Yup, the main idea was to explain the working of "==" and the reason why we should avoid boolean value comparison with "==".
You should avoid all sort of comparisons using '=='
In some cases '==' is very useful. Like when we have to compare value (String)"10" with value 10(Integer).By using "==" in this case, we don't have to perform any explicit conversion.
No, do the explicit conversion, then compare strictly. Otherwise you are leaving yourself open to bugs that will be hard to detect. There's literally no case where == is desirable.
Thanks for making the point. :-)
The only case when I use == is comparing to null, that also checks for undefined. It is an extremely rare when you need to check for undefined and null independently
I prefer Object.is() to compare NaN and for undefined I just pass variable inside of condition because undefined is falsey value.
If you need to check for
undefinedandnulljust doif (variable === undefined || variable === null) {if I see code doing:
if (variable == null) {I have no way to know if you actually wanted to check only for
nullornullandundefined.It is always better to be explicit.
For unequal types, "==" operator would first coerce the values to Number types
Inputs :
A =10, is number type,
B =true, is boolean type
Code: Which block will run?
if(A == true) {
console.log("if block")
} else {
console.log("else block")
}
Reasoning :
For unequal types, "==" operator would first coerce the values to Number types
"==" would do this coercion A === ToNumber(B)
ToNumber(B) ie ToNumber(true) results in 1
10 === 1 ?
Answer is : "else block" will be printed on console
developer.mozilla.org/en-US/docs/W...
I don't get how people code with Javascript. It's the most dangerous language I've ever seen.