Type Conversion and Coercion in Javascript💫.
Tags: javascript, webdev, react, html
Published: 2022-09-01 15:44:16

Conversion of one datatype to another in any programming language is a very crucial thing to know.
There are two ways in Javascript by which one datatype is converted into another.

1. Type conversion (Explicit-Manual).👦🏼
2. Type coercion (Implicit-Automatic).💻

## Type Conversion 👦🏼
Type conversion is a method to convert variable of one datatype into another datatype explicitly.

```
let a = "1";
console.log(typeof a)//string
a = Number(a);
console.log(typeof b);//number
```

In the above example we explicitly converted the "a" variable of datatype string into datatype of number using Number().

Since value of the "a" variable in the first line was a legit number i.e 1 it got converted.

But this would not work if "a" had a value of lets say "bagfaceasadkhan".

Using Number method on this would give use NaN i.e Not a Number.

```
let a = "bagfaceasadkhan";
console.log(typeof a)//string
a = Number(a);//NaN
console.log(typeof b);//udefined
```

Similarly we can convert various datatypes into other datatypes.

There are 7 primary datatypes in Javascript.

1. Number
2. String
3. Boolean
4. Undefined
5. Null
6. BigInt
7. Symbol

Major conversions happen between Number, String, Boolean, Undefined and some times Null.

**Things to always remember.**

- When a number is converted to boolean all the numbers will be converted to true except for 0.
- When a boolean is converted to number true will be converted to 1 and false to 0.
- When a string whose value is not actually a number i.e if it is not "1" or "10" and is something like "bagfaceasadkhan" then upon converting it to number will give output as NaN i.e Not a Number.
- When a string is converted to boolean all the strings are converted to true except for an "" (empty string).
- Undefined when converted to number will give NaN, when converted to string will give "undefined", when converted to boolean will give false.


**Tip for conversion to boolean.**

- All the falsy values i.e  "", undefined, null and 0 when converted to boolean will give false rest all will give true.

**Some code examples based on simple conversions.**

```
let a = true;//Boolean
let numA = Number(a)//1
let stringA = String(a)//"true"
let b = false;//Boolean
let numB = Number(b)//0
let stringB = String(b)//"false"
let c = 1;//Number
let cString = String(c)//"1"
let boolC = Boolean(c)//"true"
let d = 0;//Number
let dString = String(d)//"0"
let boolD = Boolean(d)//false
let e = undefined;//undefined
let eString = String(e)//"undefined"
let eNum = Number(e)//NaN
let eBool = Boolean(e)//false
```

## Type Coercion 💻

Type Coercion is a mechanism in which a variable of one datatype is automatically converted to another datatype under the hood.

```
let a = 1;
let b = "2";
console.log(a+b)//"12"//One automatically got converted to a string.
```

In the above example a variable with a datatype of number and b variable with a datatype of string was involved in an addition operation where a variable got coerced i.e automatically converted to datatype of string and then just like string concatination "1"+"2" we got the output as "12".

```
console.log(1+true+3-1);//4
```

In the above code example boolean value true got coerced to number datatype hence the operation became 1+1+3-1 = 4.

**Things to keep in mind while dealing with type coercion.**

- (+) If any one of the operand of + operator is a string and other operand of any other datatype it will try to convert the other operand to string and then will concatinate the two operands.

Lets take an example program.

```
console.log(1+3+"3"+4+"5")//"3345"
```

In the above given example the execution will go as follows.

All the arithematic operators executes from left to right.

1. 1 + 2 = 3 // both the operands are number
2. 3 + "3" = "33"// here since one operand is a string and another number the number is coerced to string and then operands are concatinated giving the output as "33".
3. "33" + 4 = "334"//here again one operand is number and another is string.
4. "334" + "5" = "3345"// here since both are string it will be a simple string concatination giving the final output as "3345".

 - (-) If anyone of the operand of - operator is string and another is of any datatype it will coerce the string operand into number.

Lets take an example program.

```
console.log(10-2-"3"-2)//3
```

1. 10 - 2 = 8 // both the operands are number so simple subtraction.
2. 8 - "3" = 5// one operand is string which is coerced to number and then simple subtraction.
3. 5 - 2 = 3// simple subtraction.

**Summary**
- If one of the two operands is a string the non-string operand will be coerced to string if the operator is +.
- If one of the two operands or both are a string the string operand will be coerced to number if the operator is any arithmetic opertor other than +.




_Some questions to try._

```
console.log(3+4+"5"+6+7);
```

```
console.log(3*4*"5");
```

```
console.log("3"+"5"-2+"3")
```

```
console.log(true+1+"33");
```