Avoid boolean values comparison with "==" in JavaScript

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

This code block is no longer available. The original code is shown below.

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

This code block is no longer available. The original code is shown below.

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

This code block is no longer available. The original code is shown below.

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

This code block is no longer available. The original code is shown below.

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

This code block is no longer available. The original code is shown below.

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.

Comments

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

[Ashish Mehra]

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

[Ignacio Catalina]

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

[Ashish Mehra]

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.

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

[Ashish Mehra]

Thanks for making the point. :-)

[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

[Ashish Mehra]

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

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

[Deen John]

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

[Guney Ozsan]

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