What Is Type Coercion in JavaScript?
Understand JavaScript type coercion — how +, -, ==, and boolean contexts silently convert values, with rules and examples.
Expected Interview Answer
Type coercion is JavaScript automatically converting a value from one type to another — string, number, or boolean — when an operator or context expects a different type, and it happens implicitly with operators like "+" and "==" unless you convert explicitly.
The "+" operator coerces to string concatenation if either operand is a string (so "5" + 3 becomes "53"), while "-", "*", and "/" coerce operands to numbers (so "5" - 3 becomes 2). Loose equality "==" applies coercion rules before comparing, which is why "0" == 0 and "" == false are both true, but null == undefined is a special case that only equals itself and undefined. Truthy/falsy coercion happens in boolean contexts like if statements: 0, "", null, undefined, NaN, and false are falsy, and everything else, including "0" and empty arrays/objects, is truthy. Because these implicit rules are easy to misjudge, the strict equality operator "===" (no coercion) and explicit conversions like Number(), String(), and Boolean() are the recommended way to avoid coercion surprises in production code.
- Lets loosely typed operators work across mixed value types without manual casting
- Explains predictable rules for +, -, ==, and boolean contexts once understood
- Strict equality (===) avoids coercion entirely for safer comparisons
- Explicit conversion functions (Number, String, Boolean) make intent clear
AI Mentor Explanation
Type coercion is like a scoreboard operator who, when told to “add” a printed placard reading "4" to the numeric total, just reads the digits off the placard and adds them as a number. But if told to “combine” two placards side by side, the operator instead concatenates them into a longer sign rather than doing arithmetic. The operator is applying a rule based on context — arithmetic versus display — without you spelling it out each time. That context-dependent, automatic reinterpretation of a value is exactly what JavaScript’s coercion does with "+" and "-".
Step-by-Step Explanation
Step 1
Operator determines target type
"+" prefers string concatenation if either operand is a string; "-", "*", "/" always coerce to numbers.
Step 2
ToPrimitive conversion runs
Objects are converted via valueOf()/toString() before the arithmetic or string rule applies.
Step 3
Loose equality applies coercion rules
"==" converts operands to a common type per the spec table before comparing.
Step 4
Boolean contexts use truthy/falsy
if/while/ternary coerce the value to true or false using the fixed falsy list.
What Interviewer Expects
- Correct explanation of "+" behaving differently from "-"/"*"/"/"
- Knowledge of the falsy value list (0, "", null, undefined, NaN, false)
- Understanding of why "===" avoids coercion entirely
- Ability to predict output of common gotchas like [] + [] or "5" + 3
Common Mistakes
- Assuming all arithmetic operators coerce to strings the same way "+" does
- Forgetting that null == undefined is a special-cased pair, not general coercion
- Treating "0" (string) as falsy — it is truthy, only the empty string is falsy
- Using "==" by default instead of defaulting to "===" and opting into coercion deliberately
Best Answer (HR Friendly)
“Type coercion is when JavaScript automatically converts a value to a different type behind the scenes, like turning the text "5" into the number 5 when you subtract, or turning a number into text when you use plus with a string. It is convenient but can cause confusing bugs, so most teams prefer strict equality and explicit conversions to keep behavior predictable.”
Code Example
console.log('5' + 3) // '53' — '+' concatenates because one side is a string
console.log('5' - 3) // 2 — '-' coerces both sides to numbers
console.log('0' == 0) // true — loose equality coerces the string to a number
console.log('0' === 0) // false — strict equality skips coercion entirely
// Explicit conversion avoids ambiguity
const raw = '42'
const asNumber = Number(raw) // 42
const asBoolean = Boolean(raw) // true, non-empty stringFollow-up Questions
- Why does [] + [] produce an empty string in JavaScript?
- What is the difference between == and === in terms of coercion?
- List all six falsy values in JavaScript.
- How does the ToPrimitive algorithm handle object-to-primitive coercion?
MCQ Practice
1. What does "5" + 3 evaluate to in JavaScript?
The "+" operator concatenates when either operand is a string, producing "53".
2. Which of these values is falsy in JavaScript?
The number 0 is falsy; "0" string, [], and {} are all truthy.
3. Why is "===" generally preferred over "=="?
Strict equality skips the coercion rules that make "==" comparisons hard to predict.
Flash Cards
What does "+" do with a string operand? — Coerces the other operand to a string and concatenates.
What do "-", "*", "/" do with string operands? — Coerce operands to numbers before computing.
List the falsy values. — 0, "", null, undefined, NaN, false.
Why prefer "===" over "=="? — It compares type and value directly, avoiding coercion-related bugs.