In JavaScript, type conversion is the process of converting a value from one type to another. Since JavaScript is a loosely typed (or dynamically typed) language, variables are not bound to any specific data type. This flexibility means that values can be automatically or manually converted between types.
There are two types of type conversion:
- Implicit Type Conversion (Type Coercion)
- Explicit Type Conversion (Type Casting)
Let’s explore both with examples.
1. Implicit Type Conversion (Type Coercion)
JavaScript automatically converts data from one type to another when needed, especially in expressions.
Examples:
javascriptCopyEditlet result = '5' + 3;
console.log(result); // "53" — number 3 is coerced to a string
let result2 = '5' - 2;
console.log(result2); // 3 — string '5' is coerced to number
let result3 = true + 1;
console.log(result3); // 2 — true becomes 1
let result4 = null + 5;
console.log(result4); // 5 — null is coerced to 0
let result5 = undefined + 1;
console.log(result5); // NaN — undefined cannot be converted to a number
JavaScript follows internal rules to determine how to coerce data types. In general:
- When using
+
, if either operand is a string, both are converted to strings. - For other arithmetic operators (
-
,*
,/
), values are usually converted to numbers. - Boolean values are converted to
1
(true) or0
(false) in numeric operations.
2. Explicit Type Conversion (Type Casting)
You can manually convert values using built-in global functions or methods like Number()
, String()
, and Boolean()
.
To Number
javascriptCopyEditNumber('123'); // 123
Number('123abc'); // NaN
Number(true); // 1
Number(false); // 0
Number(null); // 0
Number(undefined); // NaN
You can also use the unary plus operator to convert to a number:
javascriptCopyEdit+'42'; // 42
+true; // 1
+null; // 0
To String
javascriptCopyEditString(123); // "123"
String(true); // "true"
String(null); // "null"
String(undefined); // "undefined"
You can also use .toString()
method:
javascriptCopyEdit(123).toString(); // "123"
true.toString(); // "true"
To Boolean
javascriptCopyEditBoolean(0); // false
Boolean(''); // false
Boolean(null); // false
Boolean(undefined); // false
Boolean(NaN); // false
Boolean('hello'); // true
Boolean(42); // true
Truthy vs Falsy: In JavaScript, the following are falsy:
false
0
""
(empty string)null
undefined
NaN
Everything else is considered truthy.
Conversion in Comparisons
Type conversion often happens in comparisons:
javascriptCopyEdit'5' == 5; // true — string is coerced to number
'0' == false; // true — both are coerced to 0
null == undefined; // true — special case
Avoid confusion by using strict equality (===
), which checks both type and value:
javascriptCopyEdit'5' === 5; // false
null === undefined; // false
Summary Table
Value | Number() | String() | Boolean() |
---|---|---|---|
"123" | 123 | “123” | true |
"abc" | NaN | “abc” | true |
true | 1 | “true” | true |
false | 0 | “false” | false |
null | 0 | “null” | false |
undefined | NaN | “undefined” | false |
0 | 0 | “0” | false |
"" (empty) | 0 | “” | false |
Best Practices
- Use explicit conversion when possible — it’s easier to understand and maintain.
- Avoid relying on coercion for critical logic.
- Use
===
and!==
for comparisons to prevent unexpected results.
Conclusion
JavaScript’s type conversion can be both helpful and confusing. Implicit coercion is powerful but can lead to bugs if you’re unaware of how it works. Explicit type conversion gives you control and clarity. By understanding both forms of conversion, you can write cleaner and more predictable JavaScript code.