Type Conversion

Values often arrive as the wrong type — numbers typed into a form are strings, data in a URL is text. JavaScript converts between types in two ways: explicitly, when you call a function like Number(), and implicitly, when an operator does it for you. Knowing both prevents a whole family of bugs.

To a number

console.log(Number("42"));
console.log(Number("3.5"));
console.log(Number("  7  "));
console.log(Number(""));
console.log(Number("12px"));
console.log(Number(true), Number(false));
console.log(Number(null), Number(undefined));

42
3.5
7
0
NaN
1 0
0 NaN

Number() is strict: the whole string (ignoring surrounding spaces) must be a valid number, otherwise you get NaN. Note the surprises: an empty string becomes 0, and so does null.

parseInt and parseFloat

These read a number from the start of a string and stop at the first invalid character:

console.log(parseInt("12px"));
console.log(parseFloat("3.75rem"));
console.log(parseInt("3.99"));
console.log(parseInt("abc"));
console.log(parseInt("ff", 16));
console.log(parseInt("101", 2));

12
3.75
3
NaN
255
5

Use them for values with units like CSS sizes. The optional second argument to parseInt is the base (radix) — pass 10 explicitly if there's any doubt.

To a string

console.log(String(42));
console.log(String(null), String(undefined));
console.log((3.14159).toFixed(2));
console.log([1, 2, 3].toString());
console.log(String({ a: 1 }));
console.log(JSON.stringify({ a: 1 }));
console.log(42 + "");

42
null undefined
3.14
1,2,3
[object Object]
{"a":1}
42

Converting a plain object with String() gives the unhelpful [object Object] — use JSON.stringify to see its contents.

To a boolean

console.log(Boolean(1), Boolean(0));
console.log(Boolean("hi"), Boolean(""));
console.log(Boolean("false"), Boolean("0"));
console.log(Boolean([]), Boolean({}));
console.log(!!"text", !!null);

true false
true false
true true
true true
true false

A non-empty string is always true, even "false" and "0". Empty arrays and objects are also true. The double NOT !!value is a common shorthand for Boolean(value). The next lesson lists every value that converts to false.

Implicit conversion (coercion)

Operators convert their operands automatically. The rules depend on the operator:

console.log("5" + 2);
console.log("5" - 2);
console.log("5" * "2");
console.log(true + 1);
console.log([] + []);
console.log([1, 2] + [3]);
console.log("10" > 9);

52
3
10
2

1,23
true

• + prefers strings: if either side is a string, it concatenates.
• -, *, /, % always convert to numbers.
• Comparisons between a string and a number convert the string to a number.
• Arrays become strings ("1,2") when used with +.

Line five is an empty string — two empty arrays become two empty strings. These rules are why experienced developers convert explicitly and compare with ===, which never converts.

A practical example: form input

Input values are always strings. Convert before doing arithmetic, and check the result with Number.isNaN to catch invalid input.

Conversion cheat sheet

Try it yourself