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" + 1gives"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' + 1is'51'. The other math operators convert to a number. There's also coercion to boolean inifstatements, where the falsy values arefalse,0,'',null,undefined, andNaN. To avoid surprises, I prefer to do explicit conversions withNumber()orString()."
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).