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