Type Conversion in JavaScript - The Magic
Published: 2022-02-26 07:25:34

If you are a JavaScript developer then you must know JavaScript has three primitive types: _Numbers, String and Boolean_

But do you know, these types are being converted with each other to perform a certain program. This phenomenon is known as **Type Conversion**.

## Types of Conversion

1. Implicitly
2. Explicitly

Let’s explore each of this;

## 1. Implicit Type Conversion

JavaScript’s objects and function automatically convert the value to a right type for the particular operation. For example:

When you perform a `console.log()`, the expression automatically convert into String:

``` js
const num = 1001;  // num is a number
console.log(num) //> 1001
//? This num has become a string to print.
    
console.log("20"+"10") //> 2010
console.log("20"-"10") //> 10  (same for * and /)
//? Here + operator simple concatenate the "20" and "10" as string and give 2010,
//whereas - operator converts the values into number to give output 10.
```

Same for `alert()`. This also convert the value in String.

```js
const isAlive = true:
alert(isAlive)  //> true
//? This isAlive has become string
```

This **Implicit** type conversion also happen when you perform a condition operation using `if..else` or `switch`.

The expression within the `if` block is converted in `boolean` to perform the operation.

```js
const point = 100;
if(point) {  
  console.log(`You have ${point} points`)
} else {
  console.log(`Collect some point first`)
}
//? though point in number but it converts in boolean(true)
//! Since we know all the positive number is true except 0
// the output will be console.log(`You have ${point} points`)  
```

By the way if you don’t know about this **string literals** and `${}`, they are called **template literals**. This is the new feature in **ES6**. This is a very handy tool to logging a statement. Do check it out.

Some more function and operator also do this implicit type conversion, but this is not out concern. We don’t need to worry about all of the function but if you wanna know about them, you get them by doing some research.

Let’s explore the other one:

## 2. Explicit Type Conversion

In this, we manually convert the value in different types by using some operator and constructor functions.

### Number() constructor

This convert the expression into _number_.

Conversion Rule:
```js
undefined converts into NaN
null converts into 0
"" converts into 0
true converts into 1
false converts into 0
string converts into NaN
```
Example:

```js
const input = true;
const output = Number(input);
console.log(input);  //>true
console.log(output); //>1
//? The Number constructor converts the boolean value true of input into numeric value 1
```

### Some more examples:

```js
let value;
console.log(value);  //>undefined
console.log(Number(value));   //>NaN (Not a Number)
    
value = null;
console.log(value);  //>null
console.log(Number(value));   //>0
    
value = "";
console.log(value);  //>""
console.log(Number(value));   //>0
    
value = "1to4";
console.log(value);  //>"1to4"
console.log(Number(value));   //>NaN [ to is string ]
```
### String() Constructor

This convert the expression into _string_.

Example:

```js
let isAlive = true;
console.log(isAlive);  //>true
console.log(typeof isAlive);  //> boolean
    
isAlive = String(isAlive);
console.log(isAlive);  //>true
console.log(typeof isAlive);  //> string

//> Thought typeof(isAlive), second time, is true, but this true is not boolean, it's a string due to String()  
```

Any thing that pass into the `String()`, is become string _regardless_ what it been before.

### Boolean() Constructor

This convert the expression into _boolean_.

Conversion Rule:

```js
0, "", undefined, null, NaN covert into 0
others than above convert into 1
```

Example:

```js
console.log(Boolean(0)); //> false
console.log(Boolean(123)); //> true
console.log(Boolean('wooh')); //> true
console.log(Boolean("")); //> false
console.log(Boolean([])); //> true
console.log(Boolean("0")); //> true
//? Last one : Here the quote is not empty, it has a value "0".
// That's why it returns true rather than false
```

Beside the type constructor like _Number()_, _String()_, _Boolean()_, there are some also operator the convert the type of a value.

Like **'+'** operator.

Have a look:

```js
console.log(2 + "2");  //> 22
console.log(2 + +"2");  //>4
```

But why does that happen?

In the expression `2+ +”2"`, the extra + operator before “2”, force “2” to become a number. Hence the result is 4 rather than 22.

## Conclusion

In JavaScript there are three types of types that occur: Number, String and Boolean.

For implicit type conversion the JavaScript compiler handle this on its own without bother us. Where are for explicit type conversion we use type constructor named Number(), String() and Boolean().

So yeah that’s pretty much it about the type conversion in JavaScript.

## References

- [Type Conversions on JavaScript Info](https://javascript.info/type-conversions)
- [Computer Programming/Type conversion](https://en.wikibooks.org/wiki/Computer_Programming/Type_conversion)
- [Mozilla Docs](https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion)
- [How To Convert Data Types in JavaScript on Digital Ocean](https://www.digitalocean.com/community/tutorials/how-to-convert-data-types-in-javascript)

> **This article is officially published on [Within Bracket](https://withinbracket.com/posts/type-conversion-in-javascript-the-magic/)**