Type Coercion in JavaScript.Explained!
Tags: javascript, webdev, programming, computerscience
Published: 2022-01-12 14:26:04

What do you know about type coercion in JavaScript? This question often asked in an interview to a JavaScript developer. If you do not know the answer or have not heard this term before, they may put it in another way "What will be the output if you try to add 20 and '22'?"

## What is Type Coercion?

_Type coercion is the process of implicit or automatic conversion from one datatype to another._ 

Type Coercion is often confused with Type conversion, although there is a subtle difference between them. Type Coercion is always implicit whereas Type Conversion(or typecasting) can be either implicit or explicit.


As a JavaScript developer we should be aware of different ways a type coercion can take place to write better code. So, lets dive into it.

Type coercion in JavaScript only coerces to the string, number, and Boolean primitive types. There’s no way in JavaScript to coerce a value type to object or function.

## Four ways that type coercion can takes place are:

## 1.Number to String:
When a non-string value is added to a string, it always implicitly coerce or automatically convert the non-string value to a string.

```javascript
 var value = '20' + 22;
 console.log(value);//Output: 2022
```
In the above example which is also the question asked in the beginning, number **22** in implicitly converted to string **'22'** and then concatenate the two values together. The output is a string i.e “2022”.

## 2. String to Number:
When performing operations such as subtraction (-), multiplication (*), division (/) or modulus (%), all non-numeric values ​​are converted into number, as these operations can only be performed between numbers.

```javascript
var value = 20 - '5';
console.log(value);//Output: 15
```
In the above example string **'5'** in implicitly converted to number **5** and then the subtraction between the two values takes place. The output is a number i.e 15.In the same way, you can check for other operations.

## 3. Boolean to Number:

When Boolean is added to a number, the Boolean value is converted to a number as it is safe and easy to convert Boolean values ​​into Number values. Boolean value can be represented as 0 for ‘false’ or 1 for ‘true’.
 
```javascript
var value1 = 2 + true;;
console.log(value1);//Output: 3
 
var value2 = 2 + false;;
console.log(value2);//Output: 2
```
In the above example  **true** in implicitly converted to number **1** and then the addition between the two values takes place. The output is a number i.e 3.In the same way, the **false** is implicitly converted to **0** and then the values were added. The output is a number i.e 2.

## 4. The Equality Operator: 

Double equal(==) operator can be used to compare values ​​regardless of their type. This is done by implicitly converting a non-number data type to a number. Double equal(==) uses the [abstract equality algorithm](https://262.ecma-international.org/6.0/#sec-abstract-equality-comparison) to decide how to compare values. 

```javascript
 var value = (20 == '20');
 console.log(value);//Output: true
```
In the above example string **'20'** in implicitly converted to number **20** and then the comparison is made. The output is **true**.

## Conclusion

Type Coercion in JavaScript can be a tricky topic and if you are not sure about how JavaScript will perform type conversion on your value , check it out in the console first.

This is a short overview that provides the basics understanding of type coercion, however, reading the ECMAScript specifications can provide a deep understanding about why these unexpected type coercion results occur.

## Wrap Up!!
I hope you enjoyed this article. Thank you for reading. Please share it with your network. Don’t forget to leave your comments below.