Type Conversion in JavaScript - The Magic

More than just data types.
Type Conversion in JavaScript - The Magic

Table of Contents

  1. Introduction
  2. Types of Conversion
  3. Implicit Conversion
  4. Explicit Conversion
  5. Conclusion

Introduction

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

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

Thanks for sticking around. Keep Learning.