Comparison with “==” and “===” is just a difference of type checking in JavaScript, think again?

The way in which JavaScript handles types is presumably the most misjudged and controversial part. People just consider “types” as in terms like C++ or Java, and since we don’t have as obvious of type in JS which shows up in syntax, the assumption is that JS’s type system is either naive (at best) or non-existent (at worst).

Many of us may think that the difference between “==” and “===” equality operator in JavaScript is that “==” compares two values and “===” compares the value and it’s type. It is the wrong concept to go by.

Tell me the difference then, first let’s first look at a concept called coercion. So, what is coercion you may ask. Well, coercion is just a fancy term for type conversion. The process for conversion of one data type to another (a string to number or number to string) is called coercion.

Let’s see it in action:

const num1 = “25”;
const num2 = Number(num1);
console.log(num1); // “25”
console.log(num2); // 25
typeof num1; // ”string”
typeof num2; // “number”

In the above example, we are converting the data type explicitly. The process of this type of conversion is called coercion (explicit coercion). Ok great, but what does that have to do with the Tiple Equals (===), let’s get on to it.

When we compare with “==” between the two values, the data is converted from one type to another until the same data type is found, you can say that coercion is done. But when we compare with “===”, the data is not converted from one type to another, without coercion.

const num1 = “25”;
const num2 = 25;
num1 == num2 // true, type conversion is done
num1 === num2 // false

In the above example, num1==num2 JavaScript finds out that the types don’t match as num1 is string type and num2 is number type. JS then coerces one or both values until both types match. In the above example, num1==num2 , JS may coerce value to 25==25 or “25”==”25”, to give boolean result.

Let’s look at other JS boggling work at play:

true+true+true===3 //true

In this example, the arithmetic operation is done before comparison, the true boolean add(+) true boolean gives 2, as the boolean is converted in terms of number of 1,0. Then the third add gives us 3 which makes the comparison true.

(!+[]+[]+![]).length //9

What, how is that possible, is this the drunk work of JS. Well almost, let’s look into the detail.

1. !+[], gives true,
2. result true+[], gives ‘true’ (string true)
3. ![] gives false,
4. 2nd result (‘true’)+ false (string+boolean), gives string ‘truefalse’,
5. 4th result ‘truefalse’.length gives us 9 using the string native length function.