Type Conversion in JavaScript
Type conversion in JavaScript means converting a value from one data type to another.
It can happen automatically (implicit) or manually (explicit).
Implicit Type Conversion (Type Coercion)
JavaScript automatically converts types in certain operations like arithmetic, comparison, or string concatenation.
Examples:
// String + Number → String (concatenation)
console.log("5" + 3); // "53"
// Number - String → Number (if string is numeric)
console.log("5" - 3); // 2
// Boolean in arithmetic
console.log(true + 1); // 2 (true → 1)
console.log(false * 5); // 0 (false → 0)
// Loose equality (==) triggers type coercion
console.log(5 == "5"); // true ("5" → 5)
console.log(true == 1); // true (true → 1)
Explicit Type Conversion
You can manually convert types using built-in functions or operators.
a. Converting to String
Using String()
console.log(String(123)); // "123"
console.log(String(true)); // "true"
console.log(String(null)); // "null"
Using .toString()
let num = 123;
console.log(num.toString()); // "123"
console.log([1, 2, 3].toString()); // "1,2,3"
Using concatenation with an empty string
console.log("" + 123); // "123"
Converting to Number
Using Number()
console.log(Number("123")); // 123
console.log(Number("12.34")); // 12.34
console.log(Number("abc")); // NaN
console.log(Number(true)); // 1
console.log(Number(null)); // 0
Using the unary + operator
console.log(+"123"); // 123
console.log(+"abc"); // NaN
Using parseInt() and parseFloat()
console.log(parseInt("123px")); // 123
console.log(parseFloat("12.34px")); // 12.34
c. Converting to Boolean
Using Boolean()
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean("")); // false
console.log(Boolean("hello"));// true
console.log(Boolean(null)); // false
Using double negation !!
console.log(!!1); // true
console.log(!!0); // false
console.log(!!""); // false
Truthy and Falsy Values
JavaScript considers certain values as "falsy" (convert to false in a boolean context):
- false, 0, -0, 0n, "", null, undefined, NaN All other values are "truthy" (convert to true).
false, 0, -0, 0n, "", null, undefined, NaN
All other values are truthy.
console.log(!!"0"); // true (string "0" is truthy)
console.log(!![]); // true (arrays are truthy)
Common Use Cases
Form input handling: Convert string inputs to numbers for calculations.
let input = "42";
let result = Number(input) * 2; // 84
Conditional checks: Convert values to booleans for logic.
let value = "hello";
if (Boolean(value)) {
console.log("Truthy value"); // Prints
}
String formatting: Convert numbers or booleans to strings for display.
let score = 100;
console.log("Score: " + String(score)); // "Score: 100"
Caveats
NaN and Invalid Conversions: Converting non-numeric strings to numbers results in NaN.
console.log(Number("abc")); // NaN
Precision Issues: Be cautious with floating-point numbers
console.log(0.1 + 0.2); // 0.30000000000000004
Type coercion pitfalls
- Avoid relying on implicit coercion in critical logic.
- Use explicit conversion for clarity.
Checking Types Before Conversion
Use typeof to verify types before converting:
let value = "123";
if (typeof value === "string") {
let num = Number(value);
console.log(num + 10); // 133
}