DEV Community

loading...

Avoid boolean values comparison with "==" in JavaScript

mehraas profile image Ashish Mehra ・2 min read

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.

Discussion (11)

pic
Editor guide
Collapse
sirbranedamuj profile image
Zach Thacker

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...

Collapse
mehraas profile image
Ashish Mehra Author • Edited

Yup, the main idea was to explain the working of "==" and the reason why we should avoid boolean value comparison with "==".

Collapse
icatalina profile image
Ignacio Catalina

You should avoid all sort of comparisons using '=='

Thread Thread
mehraas profile image
Ashish Mehra Author

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.

Thread Thread
gsonderby profile image
Gert Sønderby

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.

Thread Thread
mehraas profile image
Ashish Mehra Author

Thanks for making the point. :-)

Thread Thread
staskjs profile image
Stanislav Karpov

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

Thread Thread
mehraas profile image
Ashish Mehra Author • Edited

I prefer Object.is() to compare NaN and for undefined I just pass variable inside of condition because undefined is falsey value.

Thread Thread
icatalina profile image
Ignacio Catalina

If you need to check for undefined and null just do

if (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 null or null and undefined.

It is always better to be explicit.

Collapse
deen_john profile image
Deen John • Edited

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...

Collapse
guneyozsan profile image
Guney Ozsan

I don't get how people code with Javascript. It's the most dangerous language I've ever seen.