Typecasting in JavaScript means converting one data type to another data type i.e., the conversion of a string data type to Boolean or the conversion of an integer data type to string data type. The typecasting in JavaScript is also known as type conversion or type coercion.
Types of conversions
There are two types of type conversion in JavaScript.
- Implicit Conversion – automatic type conversion
- Explicit Conversion – manual type conversion
Implicit Conversion
In certain situations, JavaScript automatically converts one data type to another (to the right type). This is known as implicit conversion.
Ex:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // numeric string used with + gives string type let result; result = '3' + 2; console.log(result) // "32" result = '3' + true; console.log(result); // "3true" result = '3' + undefined; console.log(result); // "3undefined" result = '3' + null; console.log(result); // "3null" |
Note:
When a number is added to a string, JavaScript converts the number to a string before concatenation.
Ex:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // numeric string used with - , / , * results number type let result; result = '4' - '2'; console.log(result); // 2 result = '4' - 2; console.log(result); // 2 result = '4' * 2; console.log(result); // 8 result = '4' / 2; console.log(result); // 2 |
Ex:
1 2 3 4 5 6 7 8 9 | // non-numeric string used with - , / , * results to NaN let result; result = 'hello' - 'world'; console.log(result); // NaN result = '4' - 'hello'; console.log(result); // NaN |
Ex:
1 2 3 4 5 6 7 8 9 10 11 12 | // if boolean is used, true is 1, false is 0 let result; result = '4' - true; console.log(result); // 3 result = 4 + true; console.log(result); // 5 result = 4 + false; console.log(result); // 4 |
Note:
JavaScript considers 0 as false and all non-zero number as true. And, if true is converted to a number, the result is always 1.
Ex:
1 2 3 4 5 6 7 8 | // null is 0 when used with number let result; result = 4 + null; console.log(result); // 4 result = 4 - null; console.log(result); // 4 |
Ex:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | // Arithmetic operation of undefined with number, boolean or null gives NaN let result; result = 4 + undefined; console.log(result); // NaN result = 4 - undefined; console.log(result); // NaN result = true + undefined; console.log(result); // NaN result = null + undefined; console.log(result); // NaN |
Explicit Conversion
You can also convert one data type to another as per your needs. The type conversion that you do manually is known as explicit type conversion.
In JavaScript, explicit type conversions are done using built-in methods.
Convert to Number Explicitly
Ex:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | // To convert numeric strings and boolean values to numbers let result; // string to number result = Number('324'); console.log(result); // 324 result = Number('324e-1') console.log(result); // 32.4 // boolean to number result = Number(true); console.log(result); // 1 result = Number(false); console.log(result); // 0 |
Ex:
1 2 3 4 5 6 7 8 | // Empty strings and null values return 0 let result; result = Number(null); console.log(result); // 0 let result = Number(' ') console.log(result); // 0 |
Ex:
1 2 3 4 5 6 7 8 9 10 11 | // If a string is an invalid number, the result will be NaN let result; result = Number('hello'); console.log(result); // NaN result = Number(undefined); console.log(result); // NaN result = Number(NaN); console.log(result); // NaN |
Note:
You can also generate numbers from strings using parseInt(), parseFloat(), unary operator + and Math.floor().
Ex:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | // Using parseInt(), parseFloat(), + , Math.floor() let result; result = parseInt('20.01'); console.log(result); // 20 result = parseFloat('20.01'); console.log(result); // 20.01 result = +'20.01'; console.log(result); // 20.01 result = Math.floor('20.01'); console.log(result); // 20 |
Convert to String Explicitly
To convert other data types to strings, you can use either String() or toString().
Ex:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | //number to string let result; result = String(324); console.log(result); // "324" result = String(2 + 4); console.log(result); // "6" //other data types to string result = String(null); console.log(result); // "null" result = String(undefined); console.log(result); // "undefined" result = String(NaN); console.log(result); // "NaN" result = String(true); console.log(result); // "true" result = String(false); console.log(result); // "false" // using toString() result = (324).toString(); console.log(result); // "324" result = true.toString(); console.log(result); // "true" |
Note:
String() takes null and undefined and converts them to string. However, gives error when null are passed.
Convert to Boolean Explicitly
To convert other data types to a boolean, you can use Boolean().
In JavaScript, undefined, null, 0, NaN, '' converts to false.
Ex:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | let result; result = Boolean(''); console.log(result); // false result = Boolean(0); console.log(result); // false result = Boolean(undefined); console.log(result); // false result = Boolean(null); console.log(result); // false result = Boolean(NaN); console.log(result); // false |
Ex:
1 2 3 4 5 6 7 8 9 10 | //All other values give true result = Boolean(324); console.log(result); // true result = Boolean('hello'); console.log(result); // true result = Boolean(' '); console.log(result); // true |
Type Conversion Table
| Value | String Conversion | Number Conversion | Boolean Conversion |
|---|---|---|---|
| 1 | “1” | 1 | true |
| 0 | “0” | 0 | false |
| “1” | “1” | 1 | true |
| “0” | “0” | 0 | true |
| “ten” | “ten” | NaN | true |
| true | “true” | 1 | true |
| false | “false” | 0 | false |
| null | “null” | 0 | false |
| undefined | “underfined” | NaN | false |
| “ | “” | 0 | false |
| ‘ ‘ | ” “ | 0 | true |
