In this part I would like to raise a topic that can be one of the strangest concepts in JavaScript.

Coercion

By this concept we mean converting a value from one type to another. As it was said before, JavaScript is a dynamically typed language, so it happens quite often.
A good example is simply changing the number into a string.

We all know what the result of the above action will be. The variable a will equal to 3. However, what happens if we replace 1 with a string '1'?

This may surprise some, but the result will be 12.

And no, this is not a number 12 but a string. You can check this by using the typeof method. This is because of Coercion.
If we want console.log our variable a, we'll just get string 12. Note that we did not have to use any method that converted the number into a string.

Comparison Operators

We do not change the subject, but we go further in the same direction. When it comes to Comparison Operators, we have several of them.

We have two examples above. In both cases, we want to return true if the result of comparison is true, or false if not.

In the first example, everything looks fine. One is less than two, and two is less than three.

The second case does not look right. In the end, three is not less than two, and two is not less than one. Now let's check what will be returned in the console.

True again, surprised? Probably not if you read the previous part. Operators Precedence and Associativity.


In the table from the previous section, we can read that there is the left-to-right associativity here. This means that in our case when operators are at the same level of precedence, a comparison of 3 < 2 is made at the beginning.
Both we and the JavaScript engine know that this is not true. Therefore, the value false will be returned. In today's lesson about Coersion, we learned that the values ​​in dynamically typing during comparison are converted.
False in JavaScript has a numeric value of 0 (true is 1).
So the JavaScript engine does not really check 3 <2 < 1 at the same time but false < 1. And that's how we know it is true. In the end, 0 is less than 1.

It may seem intuitive at first but this is how it all works.

Before the end, we can go back to the first case again.


In it, 1 < 2 < 3 was compared. Although it is true for a human being because, as I wrote above, one is less than two, and two is less than three, we now know that JavaScript does not see it in the same way as we do.
First checked is 1 < 2 and from this comes out true, 1. After that next condition is checked. True < 3. In this case we also have true because 1 is less than 3.

After this information, perhaps the question arises. Isn't it troublesome when we want to check if one side equals another ?

Consider this case. We have a variable, value is set to 0. We also know from the above text that the result of such a comparison will be true. This begs the question, and what if we want to check if our variable is actually false, not 0 after conversion.
For this we will use the ===  comparision.

Comparing in this way, we will not only check the value but also the type. Only when the variable type is identical it will be true.
Therefore, I recommend using only === to compare two sides.

Next Post

I will start talking about Objects in JavaScript.