JavaScript

Type conversion in JavaScript

In everyday life we use the term conversion. Whether we want to convert a currency into another or a file of one type to another. In programming, conversion plays an essential role which changes the dynamic of our program. Sometimes we want to convert a variable that’s compatible with the variable of different types and hence, this type of conversion of one type of data to another is called Type Conversion.

These conversions can involve:

  • Number to String conversion or vice versa
  • Number to Boolean conversion or vice versa
  • Number to Date conversion or vice versa

In this article, we will learn different type conversions in JavaScript along with examples for better understanding.

Type Conversions

JavaScript deals with type conversions in two ways:

  • Implicit Type Conversion (conversion done automatically by JavaScript)
  • Explicit Type Conversion (conversion done through the use of JavaScript methods)

Let’s understand these separately along with examples.

Implicit Type Conversion

We all are aware that JavaScript is a language that is loosely typed and due to this, it converts some data types into another automatically. This is called Implicit type conversion. It happens when you apply different types of operators to your values.

Following are some examples for your better understanding:

Converting to String:

Below is an example of converting the given data types to string.

// numeric string used with + results in string
let con;

con = '2' + 2;
console.log(con) // "22"

con = '55' + false;
console.log(con); // "55false"

con = '5' + null;
console.log(con); // "5null"          

con = 'hello' + 'world';
console.log(con); // “helloworld”

// non-numeric string used with - , / , * results to NaN

con = '455' - 'hello';
console.log(con); // NaN

Here, numeric and non-numeric strings are used. Numeric string added with number simply returns the string of them combined. Whereas, subtracting two non-numeric strings returns NaN (Not a number).

Output:

Converting to Number

Below is an example of converting the given data types to numbers.

// numeric type of string with -, /, * gives a number as an output
let con;

con = '22' - '2';
console.log(con) //  20

con = '22' - 2;
console.log(con); //  20

con = '25' / 5;
console.log(con); //  5

Output:

Converting Boolean to a Number

Below is an example of converting the boolean data type to a number.

// boolean has 1 as true and 0 as false
let con;

con = '5' - true;
console.log(con) //  4

con = '22' - false;
console.log(con); //  22

con = 25 + true ;
console.log(con); //  26

For boolean, it simply adds the value of true and false to the number and returns a numeric value. For true the value is 1, and 0 incase of false.

Output:

Converting Null to a Number:

Below is an example of converting the null data type to a number.

// null has 0 value when used with a number
let con;

con = '5' - null;
console.log(con) //  5

con = 5 + null;
console.log(con); //  5

con = 25 + null ;
console.log(con); //  25

As the null holds 0 as value, so it had no impact whether it was added or subtracted.

Output:

Explicit Type Conversion

To make the job of converting one data type to another, JavaScript provides us with various built-in methods. These methods convert strings into numbers or boolean or vice versa. This type of using of methods for conversions is called Explicit type conversion.

Following are some examples for your better understanding:

Converting to String

To convert your data type into string, JavaScript provides built-in methods string() and toString().

Example:

// String()
let con;

con = String(543);
console.log(con)           //  "543"

con = String(null);
console.log(con);         //  "null"

con = String(undefined) ;
console.log(con);          //  "undefined"        

con = String(true) ;
console.log(con);          //  "true"    

//toString

con = false.toString() ;
console.log(con);          //  "false"

Output:

Here, note that when null and undefined is used with the String() method it converts them to string. Whereas, the toString() method generates an error.

Converting to a Number

Number() method is there to convert numeric string values and boolean values to Number data type.

Example:

// String to Number
let con;

con = Number('543');
console.log(con)           //  543

con = Number("3.26e1");
console.log(con);         //  32.6

// boolean to Number
con = Number(false) ;      
console.log(con);          //  0        

con = Number(true) ;
console.log(con);          //  1    

// null, undefined

con = Number(null) ;
console.log(con);          //  0

con = Number(undefined) ;
console.log(con);          //  NaN

Here note that when null is passed, it generates 0 whereas for undefined it gives NaN (Not a Number) as an output.

Output:

Converting to Boolean:

Similarly, for converting into a boolean expression method is available called Boolean().

Example:

// 0, null, undefined , NaN generates false
let con;

con = Boolean('');
console.log(con)          

con = Boolean(null);
console.log(con);        

con = Boolean(0) ;      
console.log(con);                  

con = Boolean(NaN) ;
console.log(con);          

// anything that contains any value generates true

con = Boolean("hello") ;
console.log(con);          

con = Boolean(" ") ;
console.log(con);

con = Boolean("13333") ;
console.log(con);

Output:

Here, anything with some value will generate true. Whereas, anything not defined or without a value generates false.

Conclusion:

Type conversion is a useful way of converting various data types into other data types as sometimes we want to perform some actions on a variable but it’s not possible due to its data type. In this article, we discussed why type conversion is necessary and various types of conversions in JavaScript. JavaScript provides us with two types of type conversions. There are some built-in methods provided by JavaScript to make type conversion easier.

These methods provide the user the shortest way to convert their values and make them compatible in different data types. Through this you can make your program cleaner and readable.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.