JavaScript Type Conversion
Type conversion is the process of converting a value from one data type to another. JavaScript has both explicit (manual) conversion and implicit conversion (coercion) that happens automatically.
Explicit Conversion: String(), Number(), Boolean()
You can explicitly convert values using the built-in String(), Number(), and Boolean() functions.
Explicit Type Conversion
// Converting to String
console.log(String(123)); // '123'
console.log(String(true)); // 'true'
console.log(String(null)); // 'null'
console.log(String(undefined)); // 'undefined'
console.log(String([1, 2])); // '1,2'
console.log((123).toString()); // '123'
// Converting to Number
console.log(Number('42')); // 42
console.log(Number('3.14')); // 3.14
console.log(Number('')); // 0
console.log(Number(' ')); // 0
console.log(Number('hello')); // NaN
console.log(Number(true)); // 1
console.log(Number(false)); // 0
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
// Converting to Boolean
console.log(Boolean(1)); // true
console.log(Boolean(0)); // false
console.log(Boolean('hello')); // true
console.log(Boolean('')); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // falseTruthy and Falsy Values
In JavaScript, every value is inherently truthy or falsy. There are only 8 falsy values; everything else is truthy.
| Falsy Values | Boolean() |
|---|---|
| false | false |
| 0 | false |
| -0 | false |
| 0n (BigInt zero) | false |
| '' (empty string) | false |
| null | false |
| undefined | false |
| NaN | false |
Truthy and Falsy
// All falsy values
console.log(Boolean(false)); // false
console.log(Boolean(0)); // false
console.log(Boolean('')); // false
console.log(Boolean(null)); // false
console.log(Boolean(undefined)); // false
console.log(Boolean(NaN)); // false
// Surprising truthy values
console.log(Boolean('0')); // true (non-empty string!)
console.log(Boolean(' ')); // true (space is not empty!)
console.log(Boolean([])); // true (empty array!)
console.log(Boolean({})); // true (empty object!)
console.log(Boolean('false')); // true (string 'false'!)📝 Note: Common trap: empty arrays [] and empty objects {} are truthy! Only the 8 specific falsy values listed above are falsy.
Implicit Coercion with the + Operator
The + operator is especially tricky because it serves double duty: addition for numbers and concatenation for strings. If either operand is a string, JavaScript coerces the other to a string.
The + Operator Coercion
// String concatenation wins
console.log('5' + 3); // '53' (number coerced to string)
console.log('5' + true); // '5true'
console.log('5' + null); // '5null'
console.log('5' + undefined); // '5undefined'
// Other operators coerce to number
console.log('5' - 3); // 2
console.log('5' * 3); // 15
console.log('5' / 2); // 2.5
console.log('5' - '2'); // 3
// Unary + converts to number
console.log(+'42'); // 42
console.log(+true); // 1
console.log(+false); // 0
console.log(+''); // 0
console.log(+'hello'); // NaN== vs === Coercion
The loose equality operator (==) performs type coercion before comparing, while strict equality (===) does not. This leads to many surprising results with ==.
Loose vs Strict Equality
// == performs coercion
console.log(5 == '5'); // true (string coerced to number)
console.log(0 == false); // true
console.log('' == false); // true
console.log(null == undefined); // true
console.log(0 == ''); // true
// === no coercion
console.log(5 === '5'); // false
console.log(0 === false); // false
console.log('' === false); // false
console.log(null === undefined); // false
// Some tricky == comparisons
console.log([] == false); // true
console.log([] == 0); // true
console.log('' == 0); // true
console.log(null == 0); // false (null only == undefined)parseInt() and parseFloat()
parseInt() and parseFloat() parse strings into numbers. Unlike Number(), they stop parsing at the first invalid character instead of returning NaN.
parseInt and parseFloat
// parseInt() parses integers
console.log(parseInt('42')); // 42
console.log(parseInt('42px')); // 42 (stops at 'p')
console.log(parseInt('3.14')); // 3 (drops decimal)
console.log(parseInt('abc')); // NaN
console.log(parseInt('')); // NaN
// parseInt() with radix (base)
console.log(parseInt('0xFF', 16)); // 255
console.log(parseInt('111', 2)); // 7 (binary)
console.log(parseInt('10', 8)); // 8 (octal)
// parseFloat() parses decimals
console.log(parseFloat('3.14')); // 3.14
console.log(parseFloat('3.14.15')); // 3.14 (stops at second dot)
console.log(parseFloat('42px')); // 42
// Comparison with Number()
console.log(Number('42px')); // NaN
console.log(parseInt('42px')); // 42
console.log(Number('')); // 0
console.log(parseInt('')); // NaN📝 Note: Always provide the radix (base) parameter to parseInt(). Without it, strings starting with '0' might be interpreted as octal in older environments: parseInt('010', 10) ensures base-10 parsing.
Exercise:
What is the result of '5' + 3 in JavaScript?