DEV Community

Cover image for Coercion in JavaScript.
Uddesh
Uddesh

Posted on

Coercion in JavaScript.

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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.

Bye

Top comments (5)

Collapse
 
susickypavel profile image
Pavel Susicky • Edited

Cool post, Uddesh!

I have a note on this paragraph.

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.

In fact, we can say that triple equal checks value with coercion "disabled". On the other hand double equal allows coercion.

Collapse
 
uddeshjain profile image
Uddesh

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.

Collapse
 
azarouamine profile image
AzarouAmine • Edited

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).

Collapse
 
itenev profile image
Ивелин Тенев

The result of '100'+10 is '10010' as you've stated in the previous sentence, not 110.

Collapse
 
uddeshjain profile image
Uddesh

Thanks a lot for pointing out, Fixed now.