JavaScript is strange, It has got lots of unexpected behaviors and coercion is one of them. Coercion is always a subject of argument among the community. Some programmers think coercion as feature whether most of the programmers take it as flow in the design of the language and advice to avoid it. But to avoid something, you should be aware of that first. So let's take dive in coercion and try to understand what the hack is it.
The unexpected typecasting in javascript known as coercion. While working with data you need to convert it from one to another type like number to string or something like that, So to minimize your efforts javascript does it automatically for you, though it is not that great because most of the time get out of control and cause bugs in the system, That's why most of the people avoid it but it's totally up to you, if you are familiar with this you can use otherwise just try to avoid it.
Now, Coercion is of three types. Curious? let's discuss it.
1. Number and String
Let's understand with the example
console.log('100' - 10)
What do you think, what will be the result of the above code? if you think it will produce any error wait, my friend, you are wrong here because the output will be 90. Why?
Because javascript is smart it already knows that we can subtract two numbers only, so it coverts string i.e. '100' into a number i.e. 100.
Ok, you got the point now let's try another example
console.log('100' + 10)
Notice the (+) sign instead of (-) in the above code. So what do you think? what should be the output?
If you think it will be 110, sorry to say but you are wrong again, It will be 10010, why?
Because in case of positive sign, instead of converting 100 into a number javascript concatenated both and produced the result 10010.
2. Boolean
This one is most trouble maker among all, It is mainly used in if statements, loops and in logical operations.
So, let's consider this example
console.log(true + 100)
If you predicted output will be 101, you are getting smart. The reason is javascript take True as 1 and False as 0, Now you got the point I'm pretty sure you will definitely able to predict the output of next code.
console.log(false + 100) // obiously 100
In case you didn't get it. False will be considered as 0 so 0 + 100 will be 100.
3. Equality
We are towards the end of this post and I hope you got the idea. Now let's take a look at the last one.
console.log('100' == 100)
The above code will return True because in case of double equal operator javascript doesn't check the type of left and right side. It just checks whether values are equal or not.
console.log('100' === 100) // False
In the case of triple equal, the result will be False because triple equal operator strictly checks the type of left and right side.
I hope you got all my point. I will be back with new post until then Good Bye.
Latest comments (5)
The result of '100'+10 is '10010' as you've stated in the previous sentence, not 110.
Thanks a lot for pointing out, Fixed now.
Cool post, Uddesh!
I have a note on this paragraph.
In fact, we can say that triple equal checks value with coercion "disabled". On the other hand double equal allows coercion.
The triple equal checks both the value and the type, so in this example's case, the values are equal but the types aren't, so the output is false (false(type) & true(value) => 0 & 1 == 0 => false).
Yes, This also can be a case but as far as I concerned triple equal checks the type of the value of left and right side.