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.

JavaScript Type Conversion happen in two ways;

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:

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.

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.

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 `` 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:

undefined converts into NaN
null converts into 0
"" converts into 0
true converts into 1
false converts into 0
string converts into NaN

Example:

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:

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

String() Constructor

This convert the expression into string.

Example:

let isAlive = true;
console.log(isAlive);  //>true
console.log(typeof isAlive);  //> booleanisAlive = 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:

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

Example:

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:

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.

I see you in next article. For now keep reading and keep learning.

More content at plainenglish.io