In this article, we will learn about Type Conversions in JavaScript.
Type conversion is the process of converting data from one type to another in programming. For example: Converting String data to Number.
In JavaScript, there are two types of type conversions:
- Implicit Conversion: It is a type conversion that is done automatically.
- Explicit Conversion: It is a type conversion that is done manually.
Contents
Implicit Conversion in JavaScript
In some cases, JavaScript converts one data type to another automatically (to the right type) and so it is called Implicit conversion.
Implicit Conversion to String
// numeric string used with + gives string type let answer; answer = ‘5’ + 3; console.log(answer) // “53” answer = ‘7’ + true; console.log(answer); // “7true” answer = ‘5’ + null; console.log(answer); // “5null” answer = ‘7’ + undefined; console.log(answer); // “7undefined” |
Note: Before concatenating a number with a string, JavaScript converts the number to a string automatically.
Implicit Conversion to Number
// numeric string used with – , / , * results number type let answer; answer = ‘7’ – ‘3’; console.log(answer); // 4 answer = ‘5’ – 4; console.log(answer); // 1 answer = ‘7’ * 4; onsole.log(answer); // 28 answer = ‘6’ / 3; console.log(answer); // 2 |
Non-numeric String Results to NaN
// non-numeric string used with – , / , * results to NaN let answer; answer = ‘developers’ – ‘dome’; console.log(answer); // NaN answer = ‘4’ – ‘dd’; console.log(answer); // NaN |
Implicit Boolean Conversion to Number
// if boolean is used, true is 1, false is 0 let answer; answer = ‘6’ – true; console.log(answer ); // 5 answer = 7 + true; console.log(answer); // 8 answer = 2 + false; console.log(answer); // 2 |
Note: In JavaScript, 0 is false and all non-zero numbers are true. And the result of converting true to a number is always 1.
null Conversion to Number
// null is 0 when used with number let answer; answer = 7 + null; console.log(answer); // 7 answer = 3 – null; console.log(answer); // 3 |
undefined used with a number, boolean or null
// Arithmetic operation of undefined with number, boolean or null gives NaN let answer; answer = 5 + undefined; console.log(answer); // NaN answer = 5 – undefined; console.log(answer); // NaN answer = true + undefined; console.log(answer); // NaN answer = null + undefined; console.log(answer); // NaN |
Explicit Conversion in JavaScript
The explicit type conversion refers to a type conversion that is done manually. We can convert one data type to another according to our requirements.
Explicit type conversions are handled by built-in methods in JavaScript.
Here are a few examples of explicit conversion methods
Convert to a numerical value Explicitly
The number() can be used to convert numeric strings and boolean values to numbers. For example,
let answer; // string to number answer = Number(‘838’); console.log(answer); // 838 answer = Number(‘584e-1’) console.log(answer); // 58.4 // boolean to number answer = Number(false); console.log(answer); // 0 answer = Number(true); console.log(answer); // 1 |
Null values and empty strings in JavaScript return 0. For example:
let answer; answer = Number(null); console.log(result); // 0 let answer = Number(‘ ‘) console.log(answer); // 0 |
The result will be NaN if a string is an invalid number. For example:
let answer; answer = Number(‘hello’); console.log(answer); // NaN answer = Number(undefined); console.log(answer); // NaN answer = Number(NaN); console.log(answer); // NaN |
Note: parseInt(), parseFloat(), the unary operator +, and Math.floor can also be used to generate numbers from strings ().For example:
let answer; answer = parseInt(‘83.41’); console.log(answer); // 83 answer = parseFloat(‘49.01’); console.log(answer); // 49.01 answer = +’10.01′; console.log(answer); // 10.01 answer = Math.floor(‘19.72’); console.log(answer); // 19 |
Convert to String Explicitly
String() or toString() functions can be used to convert other data types to strings (). For example:
//number to string let answer; answer = String(324); console.log(answer); // “324” answer = String(2 + 4); console.log(answer); // “6” //other data types to string answer = String(null); console.log(answer); // “null” answer = String(undefined); console.log(answer); // “undefined” answer = String(NaN); console.log(answer); // “NaN” answer = String(true); console.log(answer); // “true” answer = String(false); console.log(answer); // “false” // using toString() answer = (324).toString(); console.log(answer); // “324” answer = true.toString(); console.log(answer); // “true” |
Note: String() converts null and undefined to string. However, When null is passed to toString(), it returns an error.
Convert to Boolean Explicitly
We can use boolean() to convert other data types to boolean.
Undefined, null, 0, NaN, and ” convert to false in JavaScript. For example:
let answer; answer = Boolean(”); console.log(answer); // false answer = Boolean(0); console.log(answer); // false answer = Boolean(undefined); console.log(answer); // false answer = Boolean(null); console.log(answer); // false answer = Boolean(NaN); console.log(answer); // false |
True is returned for all other values. For example:
answer = Boolean(324); console.log(answer); // true answer = Boolean(‘hello’); console.log(answer); // true answer = Boolean(‘ ‘); console.log(answer); // true |
JavaScript Type Conversion Table
The table below shows how to convert various values in JavaScript to String, Number, and Boolean.
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 | “undefined” | NaN | false |
” | “” | 0 | false |
‘ ‘ | ” “ | 0 | true |
That’s all about the Type Conversions in JavaScript.
You may like Operators in JavaScript.
Hope this article will guide you to recognize the Type Conversions in JavaScript that you needed and still if you have any problems or queries regarding this, post them in the comments section and we will be glad to assist you.
Pingback: if-else Statements in JavaScript - Developers Dome