== vs === in JavaScript: Abstract Equality and Type Coercion

The difference between == and === is one of the most common JavaScript interview questions — but most answers stop at “use === to avoid coercion.” This guide goes deeper: understanding how coercion works, when it’s intentional, and why the spec designed it this way.

TL;DR: === compares values without type conversion. == converts types first, then uses ===. The == operator follows a specific coercion priority defined in the ECMAScript specification. Learn the rules, and you’ll predict any comparison result.

Quick Reference

Table of Contents

• The Relationship Between == and ===
• Abstract Equality Algorithm
• Type Coercion Algorithms
• The Coercion Priority Chain
• Common Gotchas Explained
• When == Is Intentional
• Why === Is the Default
• Interview Q&A
• Interview Self-Check

The Relationship Between == and ===

Key insight: == is NOT a separate equality algorithm. It’s coercion + Strict Equality.

flowchart TD
    START["x == y"] --> CHECK{"Same type?"}
    CHECK -->|Yes| STRICT["Return x === y"]
    CHECK -->|No| COERCE["Coerce types"]
    COERCE --> RECURSE["Recurse with coerced values"]
    RECURSE --> CHECK
    
    style STRICT fill:#4ade80,stroke:#166534,color:#000
    style COERCE fill:#fbbf24,stroke:#b45309,color:#000

When types match, == behaves identically to ===:

// Same type — no coercion, == behaves like ===
5 == 5;           // true (same as ===)
"hello" == "hello"; // true (same as ===)
NaN == NaN;       // false (same as ===)

When types differ, == coerces before comparing:

// Different types — coercion happens
"5" == 5;         // true (string "5" → number 5)
true == 1;        // true (boolean true → number 1)

Abstract Equality Algorithm

The == operator follows this algorithm (simplified):

AbstractEqualityComparison(x, y):

1. If Type(x) === Type(y):
   → Return Strict Equality(x, y)

2. If x is null and y is undefined (or vice versa):
   → Return true

3. If one is Number and one is String:
   → Coerce String to Number, compare

4. If one is BigInt and one is String:
   → Coerce String to BigInt, compare

5. If one is Boolean:
   → Coerce Boolean to Number, recurse

6. If one is Object and one is primitive:
   → Coerce Object via ToPrimitive, recurse

7. If one is BigInt and one is Number:
   → If Number is finite integer, compare values; otherwise return false

8. Return false

Coercion precedence (simplified mental model):

1. null / undefined — Equal to each other only
2. Boolean → Number — Booleans convert first
3. String → Number — When compared to Number
4. Object → Primitive — Via ToPrimitive

Type Coercion Algorithms

ToPrimitive

Converts an object to a primitive value. The algorithm depends on the preferred type hint.

For “number” hint (default for most operations):

1. Try valueOf() — if primitive, return it
2. Try toString() — if primitive, return it
3. Throw TypeError

For “string” hint:

1. Try toString() — if primitive, return it
2. Try valueOf() — if primitive, return it
3. Throw TypeError

Symbol.toPrimitive (ES2015):

Objects can define custom coercion behavior:

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

+obj;      // 42 (number hint)
`${obj}`;  // "custom" (string hint)
obj + "";  // "null" (default hint, returns null → "null")

ToNumber

Converts any value to a Number.

Number(undefined);  // NaN
Number(null);       // 0
Number(true);       // 1
Number(false);      // 0
Number("");         // 0
Number("  42  ");   // 42 (trims whitespace)
Number("42abc");    // NaN
Number([]);         // 0 ([] → "" → 0)
Number([1]);        // 1 ([1] → "1" → 1)
Number([1,2]);      // NaN ([1,2] → "1,2" → NaN)

ToString

Converts any value to a String.

String(undefined);  // "undefined"
String(null);       // "null"
String(-0);         // "0" — hides the sign!
String([1, 2, 3]);  // "1,2,3"
String({});         // "[object Object]"
String({ toString: () => "custom" });  // "custom"

ToBoolean

Converts any value to a Boolean. No custom coercion — just a lookup table.

Falsy values (return false):

• false
• 0, -0, 0n
• "" (empty string)
• null
• undefined
• NaN

Everything else returns true, including:

• "0" (non-empty string)
• "false" (non-empty string)
• [] (empty array)
• {} (empty object)

Boolean("");        // false
Boolean("0");       // true — non-empty string!
Boolean([]);        // true — object!
Boolean({});        // true — object!
Boolean(new Boolean(false));  // true — object!

The Coercion Priority Chain

When == encounters different types, it follows this priority:

flowchart TD
    START["x == y (different types)"] --> NULL{"null or undefined?"}
    
    NULL -->|"null == undefined"| TRUE["Return true"]
    NULL -->|No| BOOL{"Boolean present?"}
    
    BOOL -->|Yes| TONUMBER["Convert Boolean → Number"]
    TONUMBER --> RECURSE1["Recurse"]
    
    BOOL -->|No| OBJ{"Object present?"}
    
    OBJ -->|Yes| TOPRIM["Convert Object → ToPrimitive"]
    TOPRIM --> RECURSE2["Recurse"]
    
    OBJ -->|No| NUMSTR{"Number + String?"}
    
    NUMSTR -->|Yes| STRTONUM["Convert String → Number"]
    STRTONUM --> COMPARE["Compare with ==="]
    
    NUMSTR -->|No| FALSE["Return false"]
    
    style TRUE fill:#4ade80,stroke:#166534,color:#000
    style FALSE fill:#f87171,stroke:#b91c1c,color:#000
    style TONUMBER fill:#fbbf24,stroke:#b45309,color:#000
    style TOPRIM fill:#fbbf24,stroke:#b45309,color:#000
    style STRTONUM fill:#fbbf24,stroke:#b45309,color:#000

Common Gotchas Explained

1. [] == false → true

[] == false

Step-by-step:

1. Boolean present → false → 0
2. Now: [] == 0
3. Object present → [] → "" (via toString)
4. Now: "" == 0
5. String vs Number → "" → 0
6. Now: 0 == 0
7. Return true

2. [] == ![] → true

[] == ![]

Step-by-step:

1. ![] evaluates first: [] is truthy → ![] = false
2. Now: [] == false
3. Boolean present → false → 0
4. Now: [] == 0
5. Object present → [] → "" → 0
6. Now: 0 == 0
7. Return true

3. null == undefined → true

null == undefined  // true
null === undefined // false

This is a special case in the spec. It’s explicitly defined, not derived from coercion rules.

Why? Both represent “absence of value” — comparing them loosely returns true.

Importantly:

null == 0;         // false — null doesn't coerce to 0 in ==
null == "";        // false — null only equals undefined
null == false;     // false — null only equals undefined

4. "0" == false → true

"0" == false

Step-by-step:

1. Boolean present → false → 0
2. Now: "0" == 0
3. String vs Number → "0" → 0
4. Now: 0 == 0
5. Return true

But:

Boolean("0");  // true — "0" is truthy!

This is why == can be confusing — "0" is truthy but "0" == false is true.

5. {} == "[object Object]" → true

({}) == "[object Object]"

Step-by-step:

1. Object present → {} calls toString() → "[object Object]"
2. Now: "[object Object]" == "[object Object]"
3. Same type, same value
4. Return true

When == Is Intentional

The x == null Pattern

This is the only widely-accepted use of ==:

// Checks both null AND undefined in one comparison
if (value == null) {
  // value is null or undefined
}

// Equivalent to:
if (value === null || value === undefined) {
  // value is null or undefined
}

Why this works: The spec explicitly makes null == undefined return true, and null doesn’t loosely equal anything else.

null == null;       // true
null == undefined;  // true
null == 0;          // false
null == "";         // false
null == false;      // false

Intentional String/Number Coercion

Occasionally, == is used for intentional coercion:

// User input is always a string
const input = document.getElementById("age").value;

// Intentional coercion
if (input == 18) {
  // Works with "18" or 18
}

// But explicit is better:
if (Number(input) === 18) {
  // Clear intent
}

Why === Is the Default

1. Predictability

=== has no implicit type conversion — what you see is what you get.

// With ===, the result is obvious
"5" === 5;  // false — different types

// With ==, you need to know coercion rules
"5" == 5;   // true — but why? (requires knowledge)

2. Performance

=== avoids coercion overhead and is easier for engines to optimize.

The real cost of == is not correctness — it’s cognitive load.

3. ESLint eqeqeq Rule

Most teams enable the eqeqeq rule:

{
  "rules": {
    "eqeqeq": ["error", "always", { "null": "ignore" }]
  }
}

The "null": "ignore" allows the x == null pattern.

4. TypeScript Strictness

TypeScript’s strict mode discourages == by flagging type mismatches at compile time.

Interview Q&A

5 === "5";  // false — different types
5 == "5";   // true — "5" coerced to 5

null == undefined;  // true (spec exception)
null == 0;          // false (null doesn't coerce)
null == "";         // false

if (value == null) {
  // Checks both null and undefined
}

const obj = { valueOf: () => 42, toString: () => "hello" };
+obj;      // 42 (number hint → valueOf)
`${obj}`;  // "hello" (string hint → toString)

Interview Self-Check

1. Predict the coercion chain:

[1] == true

2. Why is this false?

[] == []

3. What makes this different?

null == 0      // ?
undefined == 0 // ?

null == 0;       // false — null only equals undefined
undefined == 0;  // false — undefined only equals null

Summary Checklist

• Knows that == is coercion + Strict Equality
• Can recite the coercion priority: null/undefined → Boolean → Object → String/Number
• Understands why null == undefined is a special case
• Can trace through [] == false step by step
• Knows the x == null pattern and when it’s acceptable
• Understands ToPrimitive with valueOf/toString chain
• Can explain why === is the default recommendation

Further Reading

• JavaScript Primitive Types — The 7 primitive types and their behaviors
• JavaScript Equality Algorithms — Deep dive into ===, SameValue, SameValueZero
• ECMAScript: Abstract Equality Comparison
• ECMAScript: ToPrimitive