Implicit type coercion in comparison (JavaScript)

Tinkal
4 min readAug 17, 2020

--

When it’s come to JavaScript we have many comparison operators. When we compare different types of data some operators behave differently. This behaviour is called implicit type coercion. In brief implicit type coercion is a conversion which is done by JavaScript. So when we compare two different data type together then JavaScript converts the values to a same data type. In JavaScript, implicit type coercion does not happen in case of equal value and equal type (===) operator and not equal value or not equal type (!==) operator that’s why we will talk about other comparison operators where implicit type coercion exist.

  • Greater than (>)
  • Less than (<)
  • Greater than or equal (>=)
  • Less than or equal (<=)
  • Double equal (==)
  • not equal (!=)

So when the implicit type coercion happens in comparison, the values are always converted to `number` data type. Let’s see some examples:

In the first example, boolean true has converted into number 1. In the second example string “13” has converted into 13 and in the third example, false became 0 and string “” became number 0. In the fourth example, true converted into number 1 and string “13” has converted into number 13. Let’s see a string with another data type values.

In the first example “” get converted into number 0, that's why got false. In the second example, boolean false get converted into number 0 and you must be thinking that string “hello” should be converted into number 1. But here the string “hello” gets converted into NaN (Not a Number). So when we compare any value with NaN the result will always be false because NaN is not equal to any value even itself. That's why if we write NaN == NaN we will get false. Let’s understand this in a simple way.

In the first line, we have converted “hello” into a number and we get NaN and in the second line we have converted “hell” into a number and we get NaN. So “hello” and “hell” can’t be equal that’s why NaN can’t be equal to NaN. Now let’s look at undefined and null.

In the first example, undefined get converted into NaN and we know when we compare any value with NaN we always get false. In the second line, null gets converted into 0 so 0 can’t be greater than itself. Now let’s look at the third example we are getting true because null get converted into 0. But we didn’t get true in the fourth example because double equal works differently in case of falsy value. JavaScript has 6 falsy value. Let’s understand how double equal(==) operator works in case of falsy value through a diagram.

In the above diagram, values of each box can interact with each other but not with the other boxes i.e. 0, “” and false can’t be equal to null, undefined and NaN. Similarly null and undefined can’t be equal with NaN, 0, “” and false. But 0, “” and false are equal to each other similarly undefined and null is equal with each other.

Summary

In JavaScript, we have different types of comparison operator. When we compare different data types then it behaves differently. In different data type comparison, implicit type coercion always converts the data to a number data type. NaN can’t be equal to itself. In the case of double equal operator 0, “” and false can’t be equal to null, undefined and NaN. Similarly null and undefined can’t be equal with NaN, 0, “” and false. But 0, “” and false are equal to each other similarly undefined and null is equal with each other.

Twitter : @tinkal_deka

--

--