Launch your career in tech, no matter your educational background. Pay after placement of 5,00,000/- or more, else learn at no cost.

Prepleaf

Masai 0NE

Starting your journey in tech, or looking to take the next step in your developer journey, if you are a working professional with an ambition, we will invest in your future.

design shift

MasaiX.

Type conversion is the process of converting one data type to another. Most common type conversions are converting to string, number, and boolean types.

Masai Learn - Type Conversion in JavaScript

%s - Masai Learn

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.


In JavaScript, type conversions are of two types:

- **Implicit Conversion**
- **Explicit 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.


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](https://masai-website-images.s3.ap-south-1.amazonaws.com/image9_efa13edf15.png)

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](https://masai-website-images.s3.ap-south-1.amazonaws.com/image6_af232cb03d.png)

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](https://masai-website-images.s3.ap-south-1.amazonaws.com/image2_3217272a7c.png)


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](https://masai-website-images.s3.ap-south-1.amazonaws.com/image3_cca24c18bb.png)


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:**
![image4.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image4_00bfce567c.png)\
\
**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:**
![image8.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image8_27c152634e.png)\
\
**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:**
![image1.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image1_bf306876db.png)\
\
**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:**
![image5.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image5_a1dbe51960.png)\
\
**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:**\
\
![image10.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image10_40f57d689e.png)\
\
**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:**
![image7.png](https://masai-website-images.s3.ap-south-1.amazonaws.com/image7_5d0165203e.png)



















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.