DEV Community

Cover image for Implicit coercion In Javascript
Code Oz
Code Oz

Posted on • Edited on

Implicit coercion In Javascript

Type coercion is the process of converting value from one type to another.

When we are using

Number('89') or String(55)
Enter fullscreen mode Exit fullscreen mode

in order to convert a type into another type, we are making an Explicit coercion since we are converting the value by ourselves.

But in some case, JS Engine need to convert variable in order to execute some operation.

For example when we use == (equal operator), if both value have not the same type, it will need to use an Implicit coercion (JS engine will convert value by itself).

โš ๏ธ Be careful, don't be mistaken with === (strict Equality, coercion is not apply since we are comparing the type before the value) !

The question is how it handle this process in this case ?

55 == '55'

// or

'toto' == { name: 'toto' }
Enter fullscreen mode Exit fullscreen mode

I give you a cheat list about this process with explained exemple !

Fast Coercion sheet list

Itโ€™s the general/easy way to understand the process but for Object vs any comparaison, I summarized a few about the process.

I will explained afterward this process, but If you just want to understand the global logic, you don't need this.

Example

String vs Number

// 1)

'toto' == 24

// Convert string into number so 

Number('toto') == 24

// But we got NaN for this conversion

NaN == 24 // false !
Enter fullscreen mode Exit fullscreen mode

Object vs string

// 2)

'hello' == {}

// Use .toString() with object vs any

'hello' == {}.toString()

// So we got

'hello' == '[object Object]' // false
Enter fullscreen mode Exit fullscreen mode

Object vs boolean

// 3)

true == {}

// Use .toString() with object vs any

true == {}.toString()

true == '[object Object]' // number vs string

// convert boolean into number Number (true) = 1

1 == '[object Object]'

// We have String vs Number,
// Almost done ! We just need to convert string into number now 

1 == Number('[object Object]')

// But

1 == NaN // false !
Enter fullscreen mode Exit fullscreen mode

Advanced part

For object vs any comparaison, itโ€™s a little more complicated, in fact we need to divide this operation in 2 kinds.

For date object we need to use object.toString(), if the value return is primitive, compare it, else use object.valueOf(), if this values is not a primitive, throw a TypeError, else return value

For other object* we need to use object.valueOf(), if the value return is primitive, compare it, else use object.toString(), if this values is not a primitive, throw a TypeError, else return value

Advance Coercion Cheat Sheet

In general you will only use .toString() for object vs any, but now you can more understand the coercion handling !


I hope you like this reading!

๐ŸŽ You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me ๐Ÿ˜

Or get it HERE

๐ŸŽ MY NEWSLETTER

โ˜•๏ธ You can SUPPORT MY WORKS ๐Ÿ™

๐Ÿƒโ€โ™‚๏ธ You can follow me on ๐Ÿ‘‡

๐Ÿ•Š Twitter : https://twitter.com/code__oz

๐Ÿ‘จโ€๐Ÿ’ป Github: https://github.com/Code-Oz

And you can mark ๐Ÿ”– this article!

Top comments (2)

Collapse
 
adam_cyclones profile image
Adam Crockett ๐ŸŒ€

Implicit things make me feel so unsafe. It's a popular view that to be explicit is to be safe, in control and most importantly accountable. So in other words, I'd rather tell JavaScript to be explicit, find those bugs explicitly and type an extra =

Is that just me?

Collapse
 
codeoz profile image
Code Oz

No don't worry ;D, use == operator is not really good in fact, we always advice to use === operator :D