← JavaScript

Fundamentals

What is type coercion in JavaScript and when does it happen?

Show answer — try answering out loud first

Coercion is the automatic conversion of one data type into another that JavaScript performs. It happens mostly with the + operator (which favors strings), with == comparisons, and in contexts that expect a boolean (if, !, etc.).

JavaScript sometimes converts types on its own. There are two kinds:

  • Implicit coercion: JavaScript does it automatically. For example, "5" + 1 gives "51" because it converts the number to a string.
  • Explicit coercion: you do it on purpose, with Number(...), String(...), Boolean(...).

Key cases:

  • + with a string converts everything to a string and concatenates.
  • The other math operators (-, *, /) convert to a number.
  • In an if, values are converted to boolean. The falsy values are: false, 0, "", null, undefined, NaN. Everything else is truthy.
// + with a string concatenates
console.log("5" + 1);   // "51"  (1 becomes "1")
console.log(1 + "5");   // "15"

// other operators convert to a number
console.log("5" - 1);   // 4   ("5" becomes 5)
console.log("5" * 2);   // 10
console.log("abc" - 1); // NaN (can't be converted)

// coercion to boolean (falsy values)
if (!"") console.log("the empty string is falsy");
if (!0) console.log("zero is falsy");
if (!null) console.log("null is falsy");

// explicit coercion (recommended when you want control)
console.log(Number("42"));   // 42
console.log(String(42));     // "42"
console.log(Boolean(""));    // false

Getting confused about how + behaves. Many juniors expect "5" + 1 to be 6, but it's "51" because + with a string concatenates instead of adding. On the other hand, "5" - 1 does give 4.

"Coercion is when JavaScript automatically converts one type into another. The most famous case is the + operator: if one of the operands is a string, it converts everything to a string and concatenates, which is why '5' + 1 is '51'. The other math operators convert to a number. There's also coercion to boolean in if statements, where the falsy values are false, 0, '', null, undefined, and NaN. To avoid surprises, I prefer to do explicit conversions with Number() or String()."

Quick challenge

What does this print?

console.log(true + 1);
console.log("10" - "4");
console.log([] + []);
See answer

2 (true is converted to 1), 6 (both strings are converted to numbers), and "" (two empty arrays are converted to empty strings and concatenated).