Double equals (==) vs. Triple equals (===) in JavaScript4 min read

JavaScript is a dynamically typed language, meaning that you don’t have to specify the type of variables when working with this language, the type of your variables can be changed later on after initiating and the type is checked at run-time. This leads to some transcendent benefits, you don’t have to worry about your variables’ types, the type of variables can be flexible, your code can be less verbose and you can write programs a little quicker. Dynamically typed languages also have some drawbacks, however, the most prominent ones are it is arduous to debug sometimes and unexpected errors usually occur.

We already know that == and === in JavaScript are comparison operators and are used for testing equality between two operands. Yet, they are not the same, let’s find out and understand the distinction between them.

Triple Equals (Strict Equality Comparison)

First, we examine the === operator (strict equality comparison aka identity comparison). The type of both operands must be the same as a prerequisite before performing comparisons. For example:

'hello world' === 'hello world' // true 

So this comparison will return true because what we have here are the same values of the two operands, and both have the type of String.

Let’s examine another example:

2020 === 2020 // true 

Here we compare 2 things with the same value, and both have the type of Number, then the result is true as anticipated.

Let’s do another cool example, what you might expect to be returned?

{} === {} // ? 

You might think we are comparing two identical empty objects, and both have the same type. Then as a consequence, this code should return true. But when comparing objects, we’re comparing their references, not their actual value, the first object might point to one location and the second one points to another, hence their value is never the same. The result of this comparison will return false.

{} === {} // false, same type, but different values

Also read:

• Understand the primitive value and reference value in JavaScript

If two operands have different types, then it will always return false, no matter what:

50 === '50' // false, num compared with string
0 === false // false, num compared with boolean
undefined === null // false
'0' === false // false, string compared boolean
'1' === true // false, also string compare with boolean
'0' === new String('0') // false, string literal compared with string object

function compare() {
    let a = 5;
    let b = '5';
    if (a === b) {
        console.log('5 equals "5"');

    } else {
        console.log('5 does not equal "5"');
    }
}
compare(); // 5 does not equal "5"

Double Equals (Abstract Equality Comparison)

In JavaScript, we also can use == (abstract equality comparison, aka loose equality) to compare two values. The usage of == is slightly different compared with ===, if two operands have the same type, then it performs the comparison normally. If two values are in different types, == first converts two values in a common type, which is known as type coercion, then it conventionally compares two values.

Let’s do some examples:

5 == "5" // true

This comparison will return false if using ===. However, with ==, two values above when compared with each other will return true. JavaScript will first convert two values to a common type, then performing comparison normally, 5 compares with 5, return true.

0 == false // true

Why 0 == false gives us true. Besides two boolean values true and false, JavaScript also treats value as either truthy or falsy. Falsy values include 0, null, undefined, empty string (“”), false and NaN (not a number), all the rest are treated as truthy. The number 0 will be converted to false, Then performing comparison false == false will return true.

The same rule also applies with an empty string (“”):

"" == false // true

The peculiar part is, even null, undefined or NaN are also treated as falsy values, however, when compared with value false, JavaScript returns false \_(ツ)_/¯:

undefined == false; // false
null == false; // false 
NaN == false; // false 

Also the hilarious part:

NaN == NaN // false;

let a = NaN;
console.log(a == a ) // false

It’s JavaScript quirk. I cannot explain it with words, think for yourself. Wait, maybe we can find the answer after contemplating this article.

What about !== and !=

!== and != just are the inverse operator of ===, ==, it can be easily deduced that !== is the not strict equality comparison and != is the not abstract equality comparison. Let’s examine some example with both of them:

7 !== '7' // true, because 7 is not the same as '7'

7 != '7' // false, because 7 equals to '7' with ==, then it returns false as a flip

What Should You Use?

Because == does the type coercion, which leads to something absurd like above. When using === for equality testing, everything will stay intact during the comparison, nothing gets converted. Consequently, it’s recommended using === when compare two operands to avoid unexpected behaviors that might occur with ==.

Summing Up

=== and == are two operators for equality testing in JavaScript. === will compare two values as they are and perform no conversion. However, if two values in different types, == first convert values to a common type and do the same as ===. If we compare two different objects together, either with == or === it always returns false. In the most case, you should use === for testing equality to get rid of abnormal behaviors that may occur with ==.