Post
Ask Question

Type Conversions in JavaScript

Introduction

 
There are two types of type conversions (or) typecasting,
  • Implicit Conversion (casting) done by JavaScript engine
  • Explicit Conversion (casting) is done by the developer (or) programmer

Implicit type Conversions

 
Converting one type of data value to another type is called typecasting. If required JavaScript engine automatically converts one type of value into another type. It will try to convert it to the right type. We can see the example below:
 
E.g.
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Implicit Type Conversion</title>  
  5. </head>  
  6. <body>  
  7.     <h2>Implicit Type Conversion</h2>  
  8.     <script type="text/javascript">  
  9.         document.write (4+5.5); //the output is 9.5  
  10.         document.write("<br>");  
  11.         document.write("The type is :"+typeof(4+4.5));  
  12.     </script>  
  13. </body>  
  14. </html>  
Output
 
Type Conversions In JavaScript
 
In the above example, with four + five point three, we get the output nine point five. How the browser evaluates this expression, browser checks what operator you give to this expression. In this expression giving (‘+’) operator on the left side of the operator is an integer value and the right side of the operator real numbers. First, the browser converts the integer number to real number by putting (4.0+5.5) the add these values gives the output 9.5. Implicitly the browser converts integer numbers before evaluating the expression. We can see another example below:
 
Example
  1. document.write (4+”5”); //the output is 45  
Output
 
45
 
In this example, the browser evaluates the expression to check the type of value that you're passing to the operator in the left side number type of value right side we have a string type of value. The browser implicitly converts the number to a string (“4” +”5”) two string the (+) operator acts as a concatenation operator, then it evaluates the expression string the final output is string value 45. Here you see the type of the expression using the keyword “type of”, it is automatically done by the JavaScript engine.
 
Example
  1. document.write (type of (4+”5”)); //the output is string  
Let’s see another example for implicit type conversion:
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Implicit Type Conversions </title>  
  5. </head>  
  6. <body>  
  7.     <h2>Implicit Type Conversions </h2>  
  8.     <script type="text/javascript">  
  9.         document.write(10+"5"); // string  
  10.         document.write("<br>");  
  11.         document.write("The type is:"+typeof(10+"5"));  
  12.         document.write("<br>");  
  13.         document.write(10*"5"); // number   
  14.         document.write("<br>");  
  15.         document.write("The type is :"+typeof(10*"5"));  
  16.         document.write("<br>");  
  17.         document.write(10+9.6);   
  18.         document.write("<br>");  
  19.         document.write("The type is:"+typeof(10+9.6));  
  20.         document.write("<br>");  
  21.         document.write(10*"hello"); // it will returns not a number(NaN)   
  22.         document.write("<br>");  
  23.         document.write("The type is:"+typeof(10*"hello"));  
  24.     </script>  
  25. </body>  
  26. </html>  
Output
 
Type Conversions In JavaScript
 

Explicit Type Conversions

 
In explicit conversion to convert one type of value into another type. explicit type conversion is done by programmers using JavaScript functions. The JavaScript programmer can explicitly convert the data type. we can see the function using an explicit type conversion
  • Number () – it converts a number to string and Boolean to string
  • Boolean () – converts any type of given value into true or false (or) 0 and 1
  • ParseInt () – the given value to converts an integer
  • ParseFloat () – the given value to converts a float
  • String () – it converts any type of given value into string type
  • toString () – it converts the given number into the binary, octal, and hexadecimal
Let's see the functionalities of the functions:
 

Number ()

 
It will change the string type or any type of value converts into a number type. we can see the example to convert the string to a number.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Number Type Conversion</title>  
  5. </head>  
  6. <body>  
  7.     <h2>Number Type Conversion</h2>  
  8.     <script type="text/javascript">  
  9.         var num1 = '30';  
  10.         document.write(Number(num1));  
  11.         document.write("<br>");  
  12.         document.write("The type of num1 is :"+typeof(Number(num1)));  
  13.         document.write("<br>");  
  14.     </script>  
  15. </body>  
  16. </html>  
Output
 
Type Conversions In JavaScript
 

Boolean ()

 
It converts a given value to a true or false (or) zero’s and one’s. if you give any value within the curly braces (“hello”) true or () false.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>Boolean Type Conversion</title>  
  5. </head>  
  6. <body>  
  7.     <h2>Boolean Type Conversion</h2>  
  8.     <script type="text/javascript">  
  9.         var num1 = '30';  
  10.         document.write(Boolean("hello"));  
  11.         document.write("<br>");  
  12.         document.write("The type is :"+typeof(Boolean("hello")));  
  13.         document.write("<br>");  
  14.         //There is no value it will returns fasle  
  15.         document.write(Boolean(""));  
  16.         document.write("<br>");  
  17.         document.write("The type is :"+typeof(Boolean("")));  
  18.         document.write("<br>");  
  19.     </script>  
  20. </body>  
  21. </html>  
Output
 
Type Conversions In JavaScript
 

ParseInt ()

 
It converts a given value to an integer number, if not possible to convert the return NaN value.
 
In the below example, if the given value is of integer type then it returns as an integer.
 
E.g.
  1. document.write (24); //24  
  2. document.write (12+12); //24  
If the given value is the float type, then it discards float part and returns integer part of the number.
  1. document.write (parseInt (24)); // the output is24  
  2. document.write (parseInt (12+12.4); //the output is 24  
If the given value is of string type, it tries to extract and return the beginning integer part. If a string passed to the parseInt function doesn’t begin with an integer then it returns NaN value.
  1. document.write (parseInt (24)); //the output is24  
  2. document.write (parseInt (12.4); //12  
  3. document.write (parseInt (12 “hello world”); //the output is12  
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6. <body>  
  7.     <h2>ParseInt Type conversion</h2>  
  8.     <script type="text/javascript">  
  9.         document.write ("THe integer type is :"+parseInt (24.89));  
  10.         document.write("<br>");   
  11.     </script>  
  12. </body>  
  13. </html>  
Output
 
Type Conversions In JavaScript
 

ParseFloat ()

 
The ParseFloat () function returns a floating-point number that parses a string. This function determines whether the first character of a particular string is a number.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title></title>  
  5. </head>  
  6. <body>  
  7.     <h2>ParseInt Type conversion</h2>  
  8.     <script type="text/javascript">  
  9.         document.write ("The float type is :"+parseFloat(24.89));  
  10.         document.write("<br>");   
  11.         document.write ("The float type is :"+parseFloat(24)); // It converts the float value add 24.0  
  12.         document.write("<br>");   
  13.         document.write("The float type is"+typeof(parseFloat(24)));  
  14.         document.write("<br>");   
  15.     </script>  
  16. </body>  
  17. </html>  
Output
 
Type Conversions In JavaScript
 

String ()

 
It converts any type of given value into a string type. Using key string () explicitly converts the string value.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>String Type Conversion</title>  
  5. </head>  
  6. <body>  
  7.     <h2>String Type Conversion</h2>  
  8.     <script type="text/javascript">  
  9.         var num1 = '30 in a number';  
  10.         document.write(String(num1));  
  11.         document.write("<br>");  
  12.         document.write("The type of num1 is :"+typeof(String(num1)));  
  13.         document.write("<br>");  
  14.     </script>  
  15. </body>  
  16. </html>  
Output
 
Type Conversions In JavaScript 
 

tostring ()

 
It is used with a number and converts the number into a string. It is used to return a string function. it converts the given number into the binary, octal, and hexadecimal.
 
Example
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <title>tostring Type Conversion</title>  
  5. </head>  
  6. <body>  
  7.     <h2>tostring Type</h2>  
  8.     <script type="text/javascript">  
  9.         var num1 = '30';  
  10.         var num2 = 30;  
  11.         var x;  
  12.         x=num2.toString(2); //Converts binary  
  13.         document.write(x);  
  14.         document.write("<br>");  
  15.         document.write("The type of x is :"+typeof(x));  
  16.         document.write("<br>");  
  17.         x=num2.toString(8); //Converts octal  
  18.         document.write(x);  
  19.         document.write("<br>");  
  20.         document.write("The type of x is :"+typeof(x));  
  21.         document.write("<br>");  
  22.     </script>  
  23. </body>  
  24. </html>  
Output
 
Type Conversions In JavaScript
 

Summary

 
In this article, we have learned about Type conversions in JavaScript. I hope this article is useful to you. Thanks for reading!


Similar Articles