Tutorials Tonight
Follow Us

JAVASCRIPT TYPE CONVERSION


In JavaScript, operators and function automatically converts the values given to them to the right type.

Example, 2 * "5" outputs 10, 2 + true outputs "2true", alert() method converts any value to string before outputing.

However, there are also many cases when we have to convert data type explicitly to our desired type.

In this tutorial, we will see types of type conversion and how to convert data from one type to another type.


JavaScript typeof Operator

Before going to type conversion, you must know about the typeof operator.

The typeof is used to get the data type of JavaScript variables and values. It returns the data type in form of a string value.

Example

console.log(typeof 10); // "number"
console.log(typeof "Hello World!"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof [5, 2.6, true, "John"]); // "object"
console.log(typeof { name: "Herry", age: 25 }); // "object"
console.log(typeof new Date()); // "object"
console.log(typeof null); // object
console.log(typeof NaN); // "number"
console.log(typeof function () { });// "function"
▶ Try It

You can see in the output the type of array is an object.

Note: The typeof operator can't be used to determine if a JavaScript object is an array or not. To determine if an object is an array you may use the isArray method.

Type Conversion

There are 2 types of type conversion in JavaScript:

  1. Implicit Conversion - Type conversion that is made automatically when passing to or returning from a functionType call.
  2. Explicit Conversion - Type conversion that is made manually by using some function or method

Implicit type conversion

There are some cases when JavaScript automatically converts one data type to another data type, this automatic conversion of data type is known as implicit conversion.

Here are examples of the cases when JavaScript implicitly converts one data type to another.

Example 1: Implicit conversion to number

The values in the example below are converted to number implicitly to perform the following JavaScript operations.

Example

// string converted to number for calculation
console.log("5" - 2); // 3
console.log("5" - "2"); // 3
console.log("5" * 2); // 10
console.log("5" / 2); // 2.5
// true = 1, false = 0 when used with numbers
console.log(5 + true); // 6
console.log(5 * false); // 0
// null is 0 when used with numbers
console.log(5 + null); // 5
console.log(5 * null); // 0
▶ Try It

"5" at line 1 is a string that is converted to a number for performing subtraction with 2, and the same in lines below it. Also boolean is converted to numbers at lines number 5 and 6.

Example 2: Implicit conversion to string

The values in the example below are converted to string implicitly to perform the following JavaScript operations.

Example

console.log("5" + 2); // "52"
console.log(2 + "8"); // "28"
console.log("5" + null); // "5null"
console.log("5" + undefined); // "5undefined"
console.log("5" + true); // "5true"
▶ Try It

In the above example, 2 is converted to a string and is concatenated with "5". Same in the lines below operands are converted to a string and concatenated.


Explicit conversion

In JavaScript, you can convert one data type to another depending on your use case. Example:

  • Adding 2 numbers which are in string form. "5" + "5"
  • Converting a string to date. "Mon Nov 1997"
  • Converting boolean to number. true -> 1

The type of conversion that is explicitly done is known as explicit conversion. There are some built-in methods in JavaScript for such conversion.


JavaScript Convert Number to String

There are 3 ways by which you can convert numbers to string in JavaScript.

  1. Using String() method
  2. Using toString() method
  3. Using trick

1. convert number to string using String() method

To convert a number to a string using the global method String(). It returns the string form of the passed value.

The String() method can convert any type of numbers, variables, literals, and expression to a string.

Example

let a = 10;
console.log(String(a), typeof String(a));
console.log(String(25.5), typeof String(25.5));
console.log(String(25 + 25), typeof String(25 + 25));
▶ Try It

2. convert number to string using toString() method

The toString() does the same task, it converts number to string.

Example

let a = 10;
console.log(a.toString(), typeof a.toString());
console.log((25.5).toString(), typeof (25.5).toString());
console.log((25 + 25).toString(), typeof (25 + 25).toString());
▶ Try It

3. convert number to string using trick

Alternatively, you can convert a number to a string by adding the number with an empty string but make sure the empty string comes first in addition and number in the last.

This means, if you want to convert 10 to string then do '' + 10 not 10 + ''.

If you want to convert an expression to a string then wrap the expression in the small bracket, so that expression is first solved then converted to a string. See line number 4.

Example

let a = 10;
console.log("" + 10, typeof ("" + 10));
console.log("" + 25.5, typeof ("" + 25.5));
console.log("" + (25 + 25), typeof ("" + (25 + 25)));
▶ Try It

Convert String to Number JavaScript

In JavaScript, there are 2 main ways by which you can convert a string to a number:

  1. Using Number() method
  2. Using + operator

There are another 2 ways but they are for special cases parseInt() and parseFloat() method.


1. Convert String to Number: Number() method

To convert string to number use the global method Number().

Pass the string as an argument to the method. Example Number("10") method will convert "10" to 10.

An empty string is converted to 0 and the value that can not be converted to number converts to NaN (Not a Number).

Example

let a = "10";
console.log(Number(a), typeof Number(a));
console.log(Number("25.5"), typeof Number("25.5"));
console.log(Number("")); // 0
console.log(Number("   ")); // 0
console.log(Number("10,20")); // NaN
console.log(Number("10 20")); // NaN
console.log(Number("Hello World!")); // NaN
▶ Try It

2. Convert String to Number: unary + operator

The unary + operator can be used to convert a string to a number.

Just place a plus (+) operator in front of the string. It also looks clean.

If the string can not be converted to a number then it will be converted to NaN.

Example

let a = "10";
console.log(+a, typeof +a);
console.log(+"25.5", typeof +"25.5");
console.log(+""); // 0
console.log(+"   "); // 0
console.log(+"10,20"); // NaN
console.log(+"10 20"); // NaN
console.log(+"Hello World!"); // NaN
▶ Try It

convert date to string

To convert Date object to string simply use String() and toString() method discussed above or add an empty string to the date object.

Example

let today = new Date();
console.log(String(today));
console.log(today.toString());
console.log("" + today);
▶ Try It

convert date to number in javascript

When a Date object is converted to a number then it returns a number of milliseconds since January 1, 1970, UTC.

To convert date object to the number you can use Number() and getTime() method.

Example

let today = new Date();
console.log(Number(today));
console.log(today.getTime());
▶ Try It

Convert values to boolean

You can convert values to boolean in 2 different ways:

  1. Using Boolean() method
  2. Using the negation symbol (!)

Boolean() method

To convert the number or string to boolean use Boolean() method.

In JavaScript, 0, null, undefined, ' ' and NaN is converted to false.

Example

let str1 = "10";
console.log(Boolean(str1));      // true
let str2 = "Hello World!";
console.log(Boolean(str2));      // true
console.log(Boolean(0));         // false
console.log(Boolean(100));       // true
console.log(Boolean(null));      // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN));       // false
▶ Try It

Using negation (!)

To convert a string or number to boolean use the negation (!) symbol if the value is falsy then it will be converted to false else true.

Example

let str1 = "10";
console.log(!str1);      // false
let str2 = "Hello World!";
console.log(!str2);      // false
console.log(!0);         // true
console.log(!100);       // false
console.log(!null);      // true
console.log(!undefined); // true
console.log(!NaN);       // true
▶ Try It

JavaScript Type Conversion Table

Here is a table that represents what will be the value of a variable when converted to another data type.

Value To Number To String To Boolean
0 0 "0" false
1 1 "1" true
"0" 0 "0" false
"1" 1 "1" true
"John" NaN "john" true
true 1 "true" true
false 0 "false" false
'' 0 "" false
undefined 0 "undefined" false
null 0 "null" false
NaN 0 "NaN" false
{} NaN "[object, object] true
[] 0 "" false
[1, 2, 3] NaN "1,2,3" true
function() { } NaN "function() { }" true

Conclusion

JavaScript implicitly one data type to another data type depending on the operation performed on the data type.

You also need to convert one data type to another in many places for this we have discussed many methods in this article.


Follow Us

Copyright © Tutorials Tonight. All Rights Are Reserved.