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.

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"

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.

// 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

"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.

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"

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.

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));

2. convert number to string using toString() method

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

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());

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.

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

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).

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

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.

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

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.

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

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.

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

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.

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

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.

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

JavaScript Type Conversion Table

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

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.