Type Coercion

Conversion you did not ask for

When an operator gets types it did not expect, JavaScript converts rather than complains. Knowing the rules turns baffling results into predictable ones.

console.log('5' + 3);
console.log('5' - 3);
console.log('5' * '2');
console.log(1 + true);

53
2
10
2

The + operator is the odd one out: if either side is a string it joins them as text. Every other arithmetic operator converts to numbers first, which is why subtraction on strings does arithmetic.

The one to watch

const input = '10';

console.log(input + 1);
console.log(Number(input) + 1);

101
11

Converting on purpose

console.log(Number('42'), Number(''), Number('abc'));
console.log(parseInt('42px', 10), parseFloat('3.5rem'));
console.log(String(42), (42).toString());
console.log(Boolean(''), Boolean('no'));

42 0 NaN
42 3.5
42 42
false true

• Number is strict: the whole string must be a number, or you get NaN.
• parseInt and parseFloat are lenient: they read as far as they can and stop.
• Always pass the radix to parseInt, so parseInt(value, 10), or unusual input can be read as another base.

Objects converting to primitives

When an object meets an operator that wants a primitive, it is converted, and the results are famously strange.

console.log([] + []);
console.log([1, 2] + [3]);
console.log({} + '');
console.log([10] * 2);

1,23
[object Object]
20

Arrays convert by joining with commas, plain objects convert to [object Object]. None of this is useful in real code; it is worth seeing once so it is never mysterious.

The habit

Convert deliberately at the edges, where data arrives, and then work with values whose types you know. That single habit removes most coercion surprises.