JS Guide
HomeQuestionsTopicsCompaniesResources
BookmarksSearch

Built for developers preparing for JavaScript, React & TypeScript interviews.

ResourcesQuestionsSupport
HomeQuestionsSearchProgress
HomeTopicsjavascriptType Coercion
PrevNext
javascript
beginner
7 min read

Type Coercion

falsy
fundamentals
nullish-coalescing
operators
truthy
type-coercion

JavaScript automatically converts types during operations (implicit coercion) — the + operator favors strings, other arithmetic operators favor numbers, and there are exactly 8 falsy values.

Key Points

1Implicit Coercion

The + operator favors strings (1 + '2' = '12'); arithmetic operators -, *, / favor numbers ('6' - 1 = 5)

2Explicit Coercion

Number(), String(), Boolean() for intentional conversion; parseInt() for string-to-integer; !! for quick boolean cast

38 Falsy Values

false, 0, -0, 0n, '' (empty string), null, undefined, NaN — everything else is truthy including [], {}, '0', 'false'

4== vs ===

== coerces types before comparing (complex rules); === requires same value and type — always prefer === except for == null

5?? vs ||

|| returns first truthy value (treats 0 and '' as empty); ?? returns first non-nullish value (treats 0 and '' as valid)

What You'll Learn

  • Know how implicit and explicit type coercion work in JavaScript
  • Know all 8 falsy values and common truthy surprises like [] and '0'
  • Understand the difference between == and === and when to use each

Deep Dive

Type coercion is JavaScript's automatic conversion of values from one type to another during operations. It's one of the most common sources of bugs and one of the most frequently tested topics in interviews, especially in "what does this output?" questions.

Implicit Coercion (Automatic)

  • The + operator favors string concatenation: if either operand is a string, the other is converted to a string. 1 + '2' → '12', true + 'x' → 'truex'.
  • The -, *, /, and % operators favor numbers: '6' - 1 → 5, '3' * '2' → 6.
  • Comparison operators (<, >, <=, >=) convert both operands to numbers (unless both are strings, in which case they compare lexicographically).
  • Logical contexts (if(), &&, ||, !, ternary) convert values to booleans.
  • == (loose equality) performs type coercion before comparing. === (strict equality) does not — it requires both value and type to match.

Explicit Coercion (Intentional)

  • Number(value): converts to number. Number('42') → 42, Number('') → 0, Number('abc') → NaN, Number(true) → 1, Number(null) → 0, Number(undefined) → NaN.
  • String(value): converts to string. String(42) → '42', String(null) → 'null'.
  • Boolean(value): converts to boolean. Returns false for falsy values, true for everything else.
  • parseInt(string, radix): parses a string to an integer. Stops at the first non-numeric character: parseInt('42px') → 42. Always pass the radix (base): parseInt('010', 10) → 10.
  • Double negation !!value is a shorthand for Boolean(value).

The 8 Falsy Values

Exactly 8 values evaluate to false in boolean contexts: false, 0, -0, 0n (BigInt zero), '' (empty string), null, undefined, NaN. Everything else is truthy — including '0' (non-empty string), 'false' (non-empty string), [] (empty array), {} (empty object), and all functions.

Common Gotchas

  • [] + [] → '' (both arrays coerce to empty strings, then concatenate).
  • [] + {} → '[object Object]' (array becomes empty string, object becomes its toString).
  • null == undefined → true, but null == 0 → false and null == '' → false. The == spec has special rules for null/undefined.
  • NaN == NaN → false. NaN is not equal to anything, including itself.
  • 0 is falsy, so if (count) treats a valid zero as false — use if (count !== undefined) or nullish coalescing count ?? defaultValue.

Nullish Coalescing (??) vs Logical OR (||)

  • || returns the first truthy value — treats 0, '', and false as "empty".
  • ?? returns the first non-nullish value (not null or undefined) — treats 0, '', and false as valid.
  • Use ?? when 0 or empty string are legitimate values: input ?? 'default'.

Key Interview Distinction: == vs === == performs type coercion and has complex, hard-to-memorize rules. === compares value and type with no coercion. Best practice: always use === unless you specifically need coercion (the only common case is value == null to check for both null and undefined).

Fun Fact

[] + [] equals '' (empty string) because both arrays coerce to empty strings via toString(), then string concatenation produces '' — this is a classic interview trick question

Learn These First

Data Types

beginner

Continue Learning

Data Types

beginner

Operators

beginner

Practice What You Learned

How does type coercion work in JavaScript?
junior
type-coercion
Type coercion is JavaScript's automatic conversion of values from one type to another. It happens implicitly with operators like +, ==, and if(), or explicitly using Number(), String(), and Boolean().
Previous
The this Keyword
Next
Variables
PrevNext