Types, Coercion, and the Equality Algorithm

The Most Misunderstood Part of JavaScript

Ask a senior developer what [] == false returns and why, step by step. Most can't do it. They'll say "coercion is weird" and move on. But coercion isn't weird — it follows a precise algorithm defined in the ECMAScript specification. Once you learn that algorithm, every "WAT" moment in JavaScript becomes predictable.

This topic is the foundation everything else builds on. If you don't understand types and coercion at the spec level, you're guessing — and guessing in production breaks things.

The 8 Types

JavaScript has exactly 8 types — 7 primitives and 1 structural type:

Primitives vs Objects — The Core Distinction

Primitives are immutable values. When you "change" a string, you create a new one. Objects are mutable references. Two variables can point to the same object.

// Primitives — compared by value
let a = "hello";
let b = "hello";
a === b; // true — same value

// Objects — compared by reference
let x = { name: "hello" };
let y = { name: "hello" };
x === y; // false — different objects in memory

The Abstract Equality Algorithm (==)

When you write x == y, the engine runs the Abstract Equality Comparison algorithm from ECMA-262 section 7.2.14. Here are the exact steps:

1. If x and y are the same type, use === (strict equality).
2. If one is null and the other is undefined, return true.
3. If one is a Number and the other is a String, convert the String to a Number.
4. If one is a BigInt and the other is a String, convert the String to a BigInt.
5. If one is a Boolean, convert it to a Number (true→1, false→0), then re-compare.
6. If one is an Object and the other is a primitive (String, Number, BigInt, Symbol), call ToPrimitive on the Object, then re-compare.
7. If one is a BigInt and the other is a Number, compare mathematically.
8. Otherwise, return false.

ToPrimitive — How Objects Become Primitives

When == needs to convert an object to a primitive, it calls the internal ToPrimitive operation. This operation uses a hint — "number" or "string" — to decide which method to try first:

• hint "number": Try valueOf() first, then toString()
• hint "string": Try toString() first, then valueOf()
• hint "default" (used by == and +): Same as "number"

// Array ToPrimitive:
// 1. [].valueOf() returns the array itself (not a primitive)
// 2. [].toString() returns "" (empty string)
// So ToPrimitive([]) === ""

// Object ToPrimitive:
// 1. {}.valueOf() returns the object itself (not a primitive)
// 2. {}.toString() returns "[object Object]"
// So ToPrimitive({}) === "[object Object]"

Symbol.toPrimitive — The Override

Any object can define Symbol.toPrimitive to control its own conversion:

const price = {
  [Symbol.toPrimitive](hint) {
    if (hint === "number") return 42;
    if (hint === "string") return "$42";
    return 42; // default
  }
};

+price;        // 42 (hint "number")
`${price}`;    // "$42" (hint "string")
price + 1;     // 43 (hint "default")

Tracing the Famous Examples

Why [] == false is true

Let's trace the algorithm step by step:

Why {} + [] is 0 (in the console)

This is actually a parsing ambiguity, not coercion:

// In the console, {} is parsed as an empty block, not an object literal
{} + []
// Equivalent to: {}; +[]
// The +[] is unary plus on an empty array
// +[] → +ToPrimitive([]) → +"" → 0

// Force it to be an expression:
({} + [])  // "[object Object]" — string concatenation

Why "0" == false is true but "0" is truthy

"0" == false;  // true
// Step 5: "0" == 0  (false → 0)
// Step 3: 0 == 0    ("0" → 0)
// true

if ("0") {
  // This runs! "0" is a non-empty string, which is truthy.
}

ToNumber, ToString, ToBoolean — The Conversion Tables

ToBoolean (used by if, &&, ||, !)

Only 7 values are falsy. Everything else is truthy:

// The complete falsy list:
false, 0, -0, 0n, "", null, undefined, NaN

// Everything else is truthy, including:
"0"           // truthy (non-empty string)
" "           // truthy (space is not empty)
[]            // truthy (object)
{}            // truthy (object)
new Boolean(false)  // truthy (object!)

ToNumber (used by ==, -, *, /, unary +)

NaN === NaN;    // false
NaN == NaN;     // false
Number.isNaN(NaN);  // true — the correct check
isNaN("hello");     // true — coerces first, avoid this

Production Scenario: The Comparison Bug

A real bug pattern from production code:

function processUserInput(value) {
  // Bug: user types "0" in an input field
  if (value == false) {
    // Developer thought: "skip empty input"
    // Reality: "0" == false is true
    // User's valid input "0" gets silently dropped
    return;
  }
  submitForm(value);
}

The fix:

function processUserInput(value) {
  // Explicit check for what you actually mean
  if (value === "" || value === null || value === undefined) {
    return;
  }
  submitForm(value);
}