Type Conversion in JavaScript - The Magic

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:

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

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));   //>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:

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:

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.

References

• Type Conversions on JavaScript Info
• Computer Programming/Type conversion
• Mozilla Docs
• How To Convert Data Types in JavaScript on Digital Ocean

This article is officially published on Within Bracket