DEV Community

loading...

The Difference between JavaScript “==” and “===” Comparison Operators

uma profile image Uma Updated on ・2 min read

There are many comparison operators in javascript but we are going to discuss double equal == and triple equal === operators. It is important to know the difference between these two operators and also the difference between != and !== in javascript. Lets begin with the double equal operator:

Double equal “==”
It is known as equality. The double equal operator checks for equality of value. It doesn’t care about data types. Before it checks for equality JavaScript converts both values to the same type and then compares them, which can lead to some unexpected results. Like:

5 == 5    // true
0 ==      // true
0 == false  // true
null == undefined   // true
Enter fullscreen mode Exit fullscreen mode

As seen above, the == operator is returning true for comparing an integer and a string in the first case, then 0 equals empty string true in the second case, 0 equals false in the third case and null equals undefined is also returning true which is not true in the last case. It is just checking the value but not the type, which is why all of the above comparisons return true. Similarly, the != operator is used to check inequality. If you use != in the above examples everything will return false. It can definitely lead to some nasty bugs in an application, so it's not recommended to use the == and/or != operators for comparison in JavaScript.

Note: If you are not sure about types you can go to the console and simply type “typeof ” and check its type. You can take a look at the image below to see what is returned in the console when you check the typeof. Make sure you use all lowercase letters when writing typeof and not the camelCase version of typeOf.

Alt Text

Triple equal “===”
Known as strict equality, it not only checks for equality of value but also datatype. It cares about value and types both which is why it's recommended to use strict equality for comparison, it's more precise. The above examples will return false when === is used :

5 === 5   // false
0 ===     // false
0 === false // false
null === undefined  // false
Enter fullscreen mode Exit fullscreen mode

Similarly the !== operator is strict inequality. Beside these operators there are few more comparison operators we need to know. Here is the screen shot from the MDN documentation:

var var1 = 3;
var var2 = 4;
Alt Text

That's all for comparison operators. I hope it helps.
Happy Holidays everyone!

Discussion (3)

pic
Editor guide
Collapse
dmiraj profile image
Delusive Miraj

I started learning JS yesterday, coming from C, I wondered about this every time I see 3 '=' signs

Collapse
carlosds profile image
Karel De Smet

On the topic of "double equal", I tend to agree more with Kyle Simpson in You Don't Know JS where he states:

However, if you read his own code, you'll find plenty of examples of coercion, both implicit and explicit! In truth, his angst seems to primarily be directed at the == operation, but as you'll see in this chapter, that's only part of the coercion mechanism.

and

Let's take a different perspective on what implicit coercion is, and can be, than just that it's "the opposite of the good explicit kind of coercion." That's far too narrow and misses an important nuance. Let's define the goal of implicit coercion as: to reduce verbosity, boilerplate, and/or unnecessary implementation detail that clutters up our code with noise that distracts from the more important intent.

For anyone interested in this topic (and the mechanics of Javascript in general), this should be mandatory literature: github.com/getify/You-Dont-Know-JS...

Collapse
codingthunder profile image
Coding-Thunder

=== checks the value as well as data type