Type Conversion in JavaScript

By Mukul Latiyan

Updated on : 14 Oct 2022

17 mins read

Published on : 14 Oct 2022

Introduction to Type Conversion

Type conversion allows us to convert a variable of one data type to another data type. For example, converting numbers to strings, numbers to booleans, and so on.

In cases where you are working with data of multiple types, type conversion often becomes a necessity.

Types of Type Conversion

In JavaScript, type conversions are of two types:

Implicit Conversion
Explicit Conversion

Implicit Conversion

During Implicit Type conversion, JavaScript will automatically change the data type of a variable to another data type. Because this process is done automatically by JavaScript, it is also referred to as automatic conversion.

Let's see some of the examples of implicit type conversion in JavaScript.

Implicitly converting to a String

Below is an example in which we will see how JavaScript automatically changes values of different data types to strings based on how it is used in an expression.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Type Conversion in JavaScript</title>
</head>

<body>
        <h1>Example</h1>

        <h2>Implicitly Converting Type To String</h2>

        <script>
                let res;

                res = '3' + 5;
                console.log(res);

                res = '3' + false;
                console.log(res);

                res = '3' + undefined;
                console.log(res);

                res = '3' + null;
                console.log(res);
        </script>
</body>

</html>

Explanation -

In the above example, we are converting different values to string types.

In the expressions, '3' + 5, '3' + false, '3' + undefined, '3' + null, the JavaScript automatically converts the integer value 5, boolean value, false, undefined value, and the null value to their corresponding string.

Hence, we get output 35, 3false, 3undefined, and 3null.

If we run the above code in the browser, we will get the following output.

Output:

Implicitly Converting Type to String Javascript

Implicitly Converting to a Number

In the previous example, we learned how implicit conversion is done by JavaScript when concatenation is used, with the first operand being a string. Now we will talk about how implicit conversion is done, which results in a number data type.

Consider the code shown below.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Type Conversion in JavaScript</title>
</head>

<body>
        <h1>Example</h1>

        <h2>Implicitly Converting Type To A Number</h2>

        <script>
                let res;

                res = '5' - 3;
                console.log(res);

                res = '5' - '2';
                console.log(res);

                res = '5' / '2';
                console.log(res);

                res = '5' * '3';
                console.log(res);
        </script>
</body>

</html>

Explanation -

In the above example, we are converting different values to string types.

In the first expression, '5' - 3, we subtract a numeric value from a string value. Here, the string value will be implicitly converted to a numeric value (5), and we will get 2 as output.
Similarly, the second expression, '5' - '2', converts both the string values to their numeric values (5 and 2), and we will get 3 as output.

Similarly, in the third expression, we made use of the / operator on two string values. Here as well, these string values will be converted to a number, and we will get a numeric output.

In the last expression, we made use of the multiplication operator, in which we made use of two string operands, which will get converted to a number implicitly by JS, and the result will again be a numeric value.

If we run the above code in the browser, we will get the following output.

Output:

Implicitly Converting Type to A Number Javascript

Implicitly converting from a Boolean to a Number

JavaScript treats the boolean values true as 1 and false as 0, that's why when we use them in an expression, boolean values will be implicitly converted to their numeric alternative.

Let's see an example.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Type Conversion in JavaScript</title>
</head>

<body>
        <h1>Example</h1>

        <h2>Implicitly converting from a Boolean to a Number</h2>

        <script>
                let res;

                res = 5 - false;
                console.log(res);

                res = 5 - true;
                console.log(res);

                res = 5 / true;
                console.log(res);

                res = 5 * false;
                console.log(res);
        </script>
</body>

</html>

Explanation -

In the above example, we are using a numeric value and a boolean value in an expression. Here, boolean values true and false will be converted to 1 and 0, respectively.

Hence, the expressions, 5 - false will be 0, 5 - true will be 4, 5 / true will be 5, and 5 * false will be 0.

If we run the above code in the browser we will get the following output.

Output:

Implicitly Converting From A Boolean To A Number

Implicitly Converting Null to Number

Similar to the false value in boolean, JavaScript automatically converts the null value to 0. Hence, the expressions:

null + 5 will be 0 + 5, 5
null - 5 will be 0 - 5, -5

Let's see a working example,

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Type Conversion in JavaScript</title>
</head>

<body>
        <h1>Example</h1>

        <h2>Implicitly converting null to Number</h2>

        <script>
                let res;

                res = null + 5;
                console.log(res);

                res = null - 5;
                console.log(res);
        </script>
</body>

</html>

If we run the above code in the browser, we will get the following output.

Output:

Implicitly Converting Null To Number Javascript

Explicit Conversion

During Explicit Type Conversion, we manually change the data type of one value to another data type.

In the below sections, we will explore different examples of explicit type conversion.

Type Conversion to Numbers

There are three possible scenarios in which we can convert a to a number in JavaScript. These are

String to Number
Boolean to Number
Dates to Number

Let's explore examples of each of these scenarios.

String to Number

There are multiple ways with which we can convert a string to a number in JavaScript.

Consider the code shown below.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Type Conversion in JavaScript</title>
</head>

<body>
        <h1>Example</h1>

        <h2>String to a Number</h2>

        <script>
                let str = '123';

                // Using Number function
                console.log(Number(str));

                // Using parseInt function
                console.log(parseInt(str));

                // Using + operator
                console.log(+str);
        </script>
</body>

</html>

Explanation - In the above code, we have a string variable named str, and we are converting that to a number using

Number() method, which takes the string as its argument
parseInt() function, which also takes the string as a number
+ operator which will convert the string to a number

If we run the above code in the browser, we will get the following output.

Output:

Boolean to Number

We can also convert a boolean value to a number using various ways. Let's see an example.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Type Conversion in JavaScript</title>
</head>

<body>
        <h1>Example</h1>

        <h2>Boolean to a Number</h2>

        <script>
                let bool = true;

                // Using Number function
                console.log(Number(bool));

                // Using multiplication 
                console.log(bool * 1);

                // Using + operator
                console.log(+bool);
        </script>
</body>

</html>

Explanation - In the above code, we have a boolean variable named bool, and we are converting that to a number using

Numbers() method, which takes the boolean value as its argument
bool * 1, which will convert the boolean value true to 1
+ operator, which will prepend the value to the boolean value to convert it to a number

If we run the above code in the browser, we will get the following output.

Output:

Dates to Number

We can convert a date to a number in JavaScript by making use of the getTime() method.

Consider the code shown below.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Type Conversion in JavaScript</title>
</head>

<body>
        <h1>Example</h1>

        <h2>Date to a Number</h2>

        <script>
                let dt = new Date();

                // Using getTime method
                console.log(dt.getTime());
        </script>
</body>

</html>

Explanation - In the above code, we have a Date variable named dt. Here, we are using the getTime() method to convert the dt date to a number.

If we run the above code in the browser, we will get the following output.

Output:

Type Conversion to String

There are two possible scenarios in which we can convert from a particular data type to a number in JavaScript. These are:

Number to String
Boolean to String

Let's explore examples of each of these scenarios

Number to String

A number can be converted to a string in JavaScript in multiple ways.

Consider the code shown below.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Type Conversion in JavaScript</title>
</head>

<body>
        <h1>Example</h1>

        <h2>Number to String</h2>

        <script>
                let num = 25;

                // Using toString method
                console.log(num.toString());

                // Using String conversion
                console.log(String(num));

                // Using + symbol
                console.log(''+ num);
        </script>
</body>

</html>

Explanation - In the above code, we have a variable named num, and we are converting it to a string using

num.toString(), which acts as a method on the number type
String() function, which takes the number value as its parameter
'' + num, which converts num to number by adding an empty string (denoted by single quotes) to the num variable

If we run the above code in the browser, we will get the following output.

Output:

Boolean to String

A boolean can be converted to a string in JavaScript by making use of the toString() method.\
Consider the code shown below.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Type Conversion in JavaScript</title>
</head>

<body>
        <h1>Example</h1>

        <h2>Boolean to String</h2>

        <script>
                let val = true;

                // Using toString method
                console.log(val.toString());
        </script>
</body>

</html>

Explanation- In the above code, we have a variable named val on which we made use of the toString() method to convert a boolean to a string.

If we run the above code in the browser, we will get the following output.

Output:

Type Conversion to Boolean

Let's first see an example where we will convert these types into their boolean representation.

0
""
null
NaN

Consider the code shown below.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Type Conversion in JavaScript</title>
</head>

<body>
        <h1>Example</h1>

        <h2>to boolean</h2>

        <script>
                let str = 0;

                // Using Boolean method
                console.log(Boolean(str));

                str = "";

                // Using Boolean method
                console.log(Boolean(str));

                str = NaN;

                // Using Boolean method
                console.log(Boolean(str));

                str = null;

                // Using Boolean method
                console.log(Boolean(str));
        </script>
</body>

</html>

Explanation - In the above code, we are using the Boolean() method to convert the value to a boolean.

In JS, the values"", NaN, and 0, are represented as false values, and hence when we try to convert these values to boolean, we get boolean representative values.

If we run the above code in the browser, we will get the following output.

Output:

Conclusion

In this article, we learned how we could convert one data type to another data type in JavaScript. We also explored various examples of implicitly and explicitly converting type to number, string, and boolean type.

Modules

Module 1

Module 2

Module 3

Module 4

Type Conversion in JavaScript

Introduction to Type Conversion

Types of Type Conversion

Implicit Conversion

Implicitly converting to a String

Implicitly Converting to a Number

Implicitly converting from a Boolean to a Number

Implicitly Converting Null to Number

Explicit Conversion

Conclusion

Check Out Programs Offered By Masai

Get StartedJoin the Program