04 — Type Casting — Coercion You Ask For vs Coercion That Bites You

"The language doing weird things with types" was how I filed coercion, and it kept me from seeing the two clean flavors underneath. The idea that everything else hangs off: there are exactly two flavors of conversion, explicit (you wrote the cast) and implicit (the operator coerced for you), and most type bugs come from pretending the implicit kind isn't happening. [1]

The framing that finally landed is the split between type conversion and type coercion — same mechanism, different authorship [2]. Explicit conversion (also called type casting) is when I write the conversion: Number("42"), String(5), Boolean(x). I asked for it; it's in the code. Implicit coercion is when an operator or statement does it for me, because JavaScript is loosely typed and will try to make the operands fit: "5" + 3 becoming "53", "5" - 3 becoming 2. Both produce the same kind of result; the difference is who decided.

Implicit coercion: where the surprises live

JavaScript is loosely typed, so operators automatically convert a value to the type they expect [3]. The two operators that bite most often:

• + with a string operand — if either side is a string, + does string concatenation, not arithmetic. "3" + 4 is "34". The number got coerced to a string.
• *-, `, /** — these only do math, so both operands get coerced to numbers. "3" - 4 is -1, "6" * "7" is 42`.

The asymmetry is the trap: + is overloaded, the others aren't. So "5" + 3 and "5" - 3 give wildly different results ("53" vs 2) even though they look symmetric in the code.

The other classic is equality. The loose == operator coerces before comparing, which is why "" == 0 is true, "0" == false is true, and null == undefined is true but null == 0 is false [4]. There is an algorithm (the Abstract Equality Comparison) defining all of this, but memorizing it is a waste — the rule is just don't use ==; use === and coerce explicitly.

Falsy values round out the implicit story. In a boolean context (if, &&, ||), these coerce to false: 0, "", null, undefined, NaN, and (of course) false. Everything else is truthy — including "0", [], and {}, which is the next layer of surprises.

Explicit casting: asking on purpose

Explicit conversion is the cure for all of the above — convert deliberately, then the operators do what you expect [5]. The toolkit:

// To number
Number("42");        // 42
parseInt("42px", 10); // 42 — parses a leading integer
parseFloat("3.14");   // 3.14
+"42";                // 42 — unary plus, the shortest cast

// To string
String(42);           // "42"
(42).toString();      // "42"
`${42}`;              // "42" — template literal

// To boolean
Boolean("");          // false
!!x;                  // shortest boolean cast — double negation

parseInt is worth a note on its own: it parses from the start of a string and stops at the first non-numeric character, so parseInt("42px") is 42. Always pass the radix (the 10) — without it, leading-zero strings like "08" used to be parsed as octal, and while modern JS defaults to decimal, the explicit radix documents intent.

How I use this

The discipline is simple, and it's the one I'd hand to anyone: never rely on implicit coercion; always cast explicitly; always compare with ===. When I need a number from user input, Number(value) or parseInt(value, 10) up front. When I need a string, String(value) or a template literal. When I need a boolean, Boolean(value) or !!. Implicit coercion still happens inside if conditions (and that's fine — truthy/falsy is the one place it's idiomatic), but I never let it sneak across an operator. The payoff is that "why did '5' + 3 give '53'?" simply stops being a category of bug I write.

References

[1] I. Kantor, "Type Conversions," The Modern JavaScript Tutorial, 2024. [Online]. Available: https://javascript.info/type-conversions

[2] Mozilla, "Type Conversion and Type Coercion (Glossary)," MDN Web Docs, 2024. [Online]. Available: https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion

[3] promisetochi, "What you need to know about JavaScript's Implicit Coercion," dev.to, 2022. [Online]. Available: https://dev.to/promisetochi/what-you-need-to-know-about-javascripts-implicit-coercion-e23

[4] Mozilla, "Equality comparisons and sameness," MDN Web Docs, 2024. [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness

[5] c-sharpcorner, "Type Conversions in JavaScript," 2022. [Online]. Available: https://www.c-sharpcorner.com/article/type-conversions-in-javascript/