JavaScript ‘===’ vs ‘==’Comparison Operator

In Javascript(ES6), there are four ways to test equality which are listed below:

• Using ‘==’ operator
• Using ‘===’ operator
• SameValueZero: used mainly in sets, maps and arrays.
• SameValue: used elsewhere

Now, our main concern is getting to know the difference between the ‘==’ and ‘===’ operators that the javascript provides, though they look similar, they are very different.

• JavaScript ‘==’ operator: In Javascript, the ‘==’ operator is also known as the loose equality operator which is mainly used to compare two values on both sides and then return true or false. This operator checks equality only after converting both the values to a common type i.e type coercion.

Note: Type coercion means that the two values are compared only after attempting to convert them into the same type. Let’s look at all the values in which the ‘==’ operator will return true.

Boolean values of literals during comparison:

True

• ‘0’
• ‘false’ // false wrapped in string.
• []
• {}
• function(){}

False

• ” or “” // empty string
• false
• 0
• null
• undefined
• NaN // not-a-number

Example 1:

javascript

<script>
    // '==' operator
    console.log(21 == 21);
    console.log(21 == '21');
    console.log('food is love'=='food is love');
    console.log(true == 1);
    console.log(false == 0);
    console.log(null == undefined);
</script>

Output: In the above code, when we compare 21 with ’21’ the javascript will convert the ’21’ into the number value of 21, and hence we get true, a similar thing happens when we try to check if ‘true == 1’, in that case, the javascript basically converts 1 into a truthy value and then compares and return the boolean true. 

The case of (null == undefined) is special as when we compare these values we get true. Both null and undefined are false values and they represent an ’empty’ value or undefined in js, hence the comparison with ‘==’ operator returns true.

true
true
true
true
true
true

Now, let’s look at all the values in which the ‘==’ operator will return false.

Example 2: In this code when we compare null with false we get false, as null being a primitive data type it can never be equal to a boolean value, even though they belong to the same false group.

javascript

<script>
   // '==' operator
   console.log(21 == 32);
   console.log(21 == '32');
   console.log(true == 0);
   console.log(null == false);
</script>

Output:

false
false
false
false

JavaScript ‘===’ operator: Also known as strict equality operator, it compares both the value and the type which is why the name “strict equality”.

Example 1: Let’s see some code where ‘===’ operator will return true.

javascript

</script>
    // '===' operator
    console.log('hello world' === 'hello world');
    console.log(true === true);
    console.log(5 === 5);
</script>

Output:

true
true
true

Example 2: Simply check the types and values at both sides and then just print out the boolean true or false. Some examples where it will return false.

javascript

<script>
    // '===' operator
    console.log(true === 1);
    console.log(true === 'true');
    console.log(5 === '5');
</script>

Output:

false
false
false

Please go through the Difference between double equal vs triple equal JavaScript article to compare ‘===’ and ‘==’ operators.