Implicit vs explicit type coercion
Explicit coercion is when you deliberately convert a type (Number(x), String(x), Boolean(x)). Implicit coercion is when JS auto-converts during operations (==, +, if conditions, template literals). Implicit is the source of many bugs — prefer explicit conversion and ===.
Type coercion is converting a value from one type to another. The distinction is who triggers it — you, or the JS engine.
Explicit coercion — you ask for it
You deliberately convert:
Number("42") // 42
String(42) // "42"
Boolean(0) // false
parseInt("42px") // 42
+"42" // 42 (unary plus — explicit-ish)Intentional, readable, predictable.
Implicit coercion — JS does it for you
The engine converts automatically during an operation:
"5" + 3 // "53" — + with a string → string concatenation
"5" - 3 // 2 — - has no string meaning → numeric coercion
5 + true // 6 — true → 1
5 == "5" // true — == coerces operands to compare
if ("hello") // truthy — string → boolean
`hi ${42}` // "hi 42" — template literal coerces to string
[] + [] // "" — arrays → primitives → strings
[] + {} // "[object Object]"Why implicit coercion bites
The rules are subtle and inconsistent:
+means concatenation if either operand is a string, otherwise addition.==runs the abstract equality algorithm —0 == "",0 == false,null == undefinedare alltrue;NaN == NaNisfalse.- Objects coerce via
valueOf/toString, producing surprises like[] + {}.
The rules behind it (abstract)
- ToPrimitive — objects → primitives (via
valueOf/toString). - ToNumber —
""→0,"5"→5,"abc"→NaN,true→1,null→0,undefined→NaN,[]→0,[5]→5. - ToString — numbers/booleans/arrays → string forms.
- ToBoolean — falsy values:
false, 0, -0, "", null, undefined, NaN; everything else truthy.
Best practices
- Use
===/!==— strict equality, no coercion. (==only deliberately, e.g.x == nullto catch null and undefined.) - Coerce explicitly —
Number(x),String(x),Boolean(x)— so intent is obvious. - Be careful with
+on mixed types; validate/convert input from the DOM (always strings) and APIs. - Lint rules (eslint
eqeqeq) enforce it.
How to answer
"Explicit coercion is a deliberate conversion — Number(), String(), Boolean(). Implicit is the engine auto-converting during operations like ==, +, or an if condition. Implicit coercion follows subtle rules (ToPrimitive/ToNumber/ToString/ToBoolean) and causes classic bugs, so I prefer === and explicit conversions — coerce on purpose, not by accident."
Follow-up questions
- •Walk through why [] + {} and {} + [] give different results.
- •What does the == abstract equality algorithm do?
- •What are all the falsy values in JavaScript?
- •When is == actually useful?
Common mistakes
- •Using == and getting surprised by 0 == '', null == undefined, etc.
- •Assuming + always adds — it concatenates if either side is a string.
- •Relying on implicit boolean coercion with values like '0' (truthy!) or [].
- •Not converting DOM/input values (always strings) before numeric math.
Performance considerations
- •
Edge cases
- •NaN == NaN is false; use Number.isNaN.
- •[] is truthy but [] == false is true.
- •null == undefined is true, but null === undefined is false.
- •Object coercion via valueOf/toString producing odd strings.
Real-world examples
- •Form inputs and URL params arrive as strings — explicit Number() before arithmetic.
- •x == null as a deliberate idiom to check null or undefined in one comparison.