In programming, type conversion is the process of converting data of one type to another. For example, converting string data to number.
There are two types of type conversion in JavaScript:
- Implicit Conversion - Automatic type conversion.
- Explicit Conversion - Manual type conversion.
JavaScript Implicit Conversion
In certain situations, JavaScript automatically converts data of one type to another (to the right type). This is known as implicit conversion. For example,
// numeric string used with + gives string type
let result;
// convert number to string
result = "3" + 2;
console.log(result, "-", typeof(result));
result = "3" + true;
console.log(result, "-", typeof(result));
result = "3" + null;
console.log(result, "-", typeof(result));
Output
32 - string 3true - string 3null - string
In this example, we performed implicit type conversion using the + operator with a string and another data type.
Here,
"3" + 2- Converts the number 2 to string and joins it to"3", resulting in the string"32"."3" + true- Converts the booleantrueto string and joins it to"3", resulting in the string"3true"."3" + null- Converts null to string and joins it to"3", resulting in the string"3null".
Note: The typeof operator gives the data type of the variable.
JavaScript Explicit Conversion
In explicit type conversion, you manually convert one type of data into another using built-in functions. For example,
let result;
// convert string to number
result = Number("5");
console.log(result, "-", typeof(result));
// convert boolean to string
result = String(true);
console.log(result, "-", typeof(result));
// convert number to boolean
result = Boolean(0);
console.log(result, "-", typeof(result));
Output
5 - number true - string false - boolean
Here,
- Number("5") changes the string
"5"into the number 5. - String(true) turns the boolean
trueinto the string"true". - Boolean(0) converts the number 0 to the boolean
falsebecause 0 is considered a falsy value in JavaScript.
More on JavaScript Type Conversion
When you use arithmetic operators like -, *, or / with numeric strings, JavaScript automatically changes those strings into numbers.
Let's look at an example.
// numeric string used with - , / , *
// results in number type
let result;
result = "4" - "2";
console.log(result, "-", typeof(result));
result = "4" - 2;
console.log(result, "-", typeof(result));
result = "4" * 2;
console.log(result, "-", typeof(result));
result = "4" / 2;
console.log(result, "-", typeof(result));
Output
2 - number 2 - number 8 - number 2 - number
The table shows the conversion of different values to String, Number, and Boolean in JavaScript.
| 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 |
You will learn about the conversion of objects and arrays to other data types in later tutorials.
Understanding the rules for type conversion is crucial for avoiding unexpected results in your JavaScript code.
Here are some key points:
- Operations involving binary
+will convert numbers to strings in the case of string and number concatenation. - Logical operations convert operands to boolean values.
- When subtracting a string from another string, JavaScript attempts to convert both strings to numbers.
- When you change an object's type, some data might get lost.
Also Read: