Menu Close

JavaScript Type Conversion

In this tutorial, you will learn about JavaScript Type Conversion. In the previous tutorial, we saw JavaScript operators with the help of examples. Type conversion is the process of converting one data type to another data type.

In this guide we will see all about JavaScript Type conversion, its types with appropriate example.

What is JavaScript Type Conversion ?

JavaScript type conversion is the process of converting one data type to another data type. There are two types of type JavaScript type conversion available.

  • Implicit type conversion
  • Explicit type conversion

JavaScript Data Types

In JavaScript, there are 5 different data type the contain can contain values.

  • string
  • number
  • Boolean
  • function
  • object

There are 6 types of objects.

  • Object
  • Date
  • Array
  • String
  • Number
  • Boolean

And are 2 data types that cannot contain values.

  • null
  • undefined

The typeof operator

You can use typeof operator to find the data type of JavaScript variables.

Example:


console.log( typeof "Vishavjit" ); // string
console.log( typeof 12 ); // number
console.log( typeof NaN ); // number
console.log( typeof false ); // boolean
console.log( typeof true ); // boolean
console.log( typeof [1,2,3,4] ); // object
console.log( typeof {name: 'Vishvajit', city: 'lucknow'} ); // object
console.log( typeof new Date() ); // object
console.log( typeof function() {} ); // function
console.log( typeof null ); // object

Explicit JavaScript Type Conversion

When one data type is converted into another data type according to your need is known as JavaScript explicit type conversion.

There are various built-in functions available to perform explicit type conversion.

Convert Number to String

To convert number to string, use global method String().


var x = 12;
var result = String(x);
console.log(result, typeof);
console.log(String(1230));
console.log(String(1230 + 40));

The number method toString() does the same.


var x = 12;
var y = x.toString();
console.log('The result is:- ', y);

Converting Boolean to String

The global method can convert Boolean to string.


console.log(String(true)); // true
console.log(String(false)); // false

Convert Date to String

The global method String() can convert date to string.


var x = Date();
console.log('The result is:- ', String(x));

The Number method toString() can also convert date to string.

var x = Date();
var y = x.toString();
console.log('The result is:- ', y);

You can use more Date() method to convert date to string.

  • getFullYear():- get the year as four digit.
  • getMonth():- get the month as number ( 0-11 ).
  • getDate():- get the day as number ( 1-31 ).
  • getDay():- get the week day as number ( 0-6 ).
  • getTime():- Get the time (milliseconds since January 1, 1970).
  • getSeconds():- get the seconds as number ( 0-59 ).
  • getMilliseconds():- get the milliseconds as number ( 0-999 ).
  • getMinutes():- get the week day as number ( 0-59 ).
  • getHoures():- get the week day as number ( 0-23).

Convert Other to String

You can also convert NaN, null, undefined to string by using String() function.

console.log(String(null)); //null
console.log(String(NaN)); // NaN
console.log(String(undefined)); // undefined

Convert String To Number

JavaScript provides a global function Number() to convert a string to a number.
The empty string converts to 0.

console.log(Number("12.21"));
console.log(Number(" "));
console.log(Number(""));
console.log(Number("540"));

You can also use parseInt(), parseFloat(), uniary operator + and Math.floor() function to generate number from the string.

let result;
result = parseInt('12.45'); // 12
console.log(result);

result = parseFloat('12.45'); // 12.45
console.log(result);

result = +'12.45';
console.log(result); // 12.45


result = Math.floor('12.45'); 12
console.log(result);

Convert Boolean To Number

The global method Number() is also used to convert Boolean (true or false) to Number.

console.log(Number(true)); // 0 
console.log(Number(false)); // 1

Convert Date to Number

The global method Number() is used to convert date to Number.

var x = new Date();
console.log(Number(x)); // 1622343996740

The date method getTime() does the same.

let x = new Date();
console.log(x.getTime()); // 1622344091784

Implicit JavaScript Type Conversion

In some situations, JavaScript automatically converts one data type to another data type, is known as implicit type conversion.

Example: Implicit conversion to Number

let result;

result = '3' + 3;
console.log("The result is:- ", result); // 33

result = '10' + null;
console.log("The result is:- ", result); // 10null

result = '3' + true;
console.log("The result is:- ", result); // 3true

result = '30' + undefined;
console.log("The result is:- ", result); // 30undefined

Note:- When a number added to the string, JavaScript convert to a string before concatenation.

Example: Implicit conversion to Number

Here, we will see how implicit conversion to number is performed.

let result;

result = '3' + '3';
console.log("The result is:- ", result); // 6

result = '10' - 5;
console.log("The result is:- ", result); // 5

result = '3' * 10;
console.log("The result is:- ", result); // 30

result = '30' / 15;
console.log("The result is:- ", result); // 2

Example: Implicit Boolean conversion to Number

let result;
result = '4' - true;
console.log("The result is:- ", result); // 3

result = 5 + true;
console.log("The result is:- ", result); // 6

result = 9 + false;
console.log("The result is:- ", result); // 9

Note:- JavaScript consider 0 as false and 1 as true.

Example: Implicit conversion null to Number

let result;

result = 4 - null;
console.log("The result is:- ", result); // 4

result = 5 + null;
console.log("The result is:- ", result); // 5

Note:- null become 0 when used with number.

Conclusion

So, In this JavaScript tutorial, you have learned all about JavaScript type converion and its types with the help of the examples. Type conversion in JavaScript is most important, when you want to convert one data type to another data type.

I hope, This JavaScript tutorial will have helped you. If you like this article, please support and share this, so that we can provide the best JavaScript for you from time to time.

All the best!

Previous Article
Next Article

Was this post helpful?

Related Posts