Implicit coercion In Javascript
Tags: javascript, typescript, node
Published: 2020-12-08 16:52:39

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

When we are using

```js
Number('89') or String(55)
```
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 ?

```js
55 == '55'

// or

'toto' == { name: 'toto' }
```
I give you a cheat list about this process with explained exemple !

![Fast Coercion sheet list](https://dev-to-uploads.s3.amazonaws.com/i/nlpxeg7jrrkh5ufkb4hm.png)

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

```js
// 1)
 
'toto' == 24
 
// Convert string into number so 
 
Number('toto') == 24
 
// But we got NaN for this conversion
 
NaN == 24 // false !
```
Object vs string

```js
// 2)

'hello' == {}
 
// Use .toString() with object vs any

'hello' == {}.toString()
 
// So we got
 
'hello' == '[object Object]' // false
```

Object vs boolean

```js
// 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 !
```

### 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](https://dev-to-uploads.s3.amazonaws.com/i/6i33avx4rew4m1lftmay.png)

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](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!