What is Coercion? How it works internally.

🧠 What is Coercion in JavaScript?

In JavaScript, coercion (type coercion) is:

The automatic or explicit conversion of a value from one type to another

🎯 Types of Coercion

1. Implicit Coercion (Automatic)

Done by the engine behind the scene

"5" + 2   // "52"

1. Explicit Coercion (Manual)

Number("5") // 5

String(10)  // "10"

⚙️ Why Coercion Exists

JavaScript is dynamically typed, so the engine must decide:

"How do I perform an operation when types differ?"

🔬 Internal Mechanism (Core Concept)

Behind the scenes, JavaScript follows ECMAScript abstract operations, mainly:

Key Internal Algorithms:
ToPrimitive
ToNumber
ToString
ToBoolean

These are not actual JS functions—they are engine-level conversion rules.

🧩 1. ToPrimitive (Most Important)

Before any operation, JS tries to convert values into a primitive type.

Example:
[] + {}
Step-by-step:
[] → ToPrimitive → ""
{} → ToPrimitive → "[object Object]"

👉 Final:

"" + "[object Object]" → "[object Object]"

⚙️ How ToPrimitive Works

For objects:

1. Try valueOf()
2. If not primitive → try toString()

Example:
let obj = {
  valueOf() { return 10; }
};

obj + 5 // 15

🧩 2. ToNumber

Used in math operations:

"5" - 2  // 3
Internally:
"5" → ToNumber → 5

Rules:

🧩 3. ToString

Used when concatenation happens:

5 + "2" // "52"

Internally:
5 → "5"

🧩 4. ToBoolean

Used in conditions:

if ("hello") // true

Falsy Values:
false, 0, "", null, undefined, NaN

Everything else → truthy

⚙️ Operator-Based Coercion

🔥 + Operator (Special Case)

1 + "2"  // "12"

👉 If ANY operand is string → string concatenation

➖ Other Operators

"5" - 2  // 3
"5" * 2  // 10

👉 Always convert to number

🔍 Comparison Coercion (==)

Example:
"5" == 5 // true

Internal Steps:

1. Types different → convert both to number
2. "5" → 5
3. Compare → true

Weird Cases:

null == undefined // true
[] == false       // true

Why?
[] → ToPrimitive → ""
"" → ToNumber → 0
false → 0

👉 0 == 0 → true

⚠️ Strict Equality (===)

"5" === 5 // false

👉 No coercion

🔬 Full Internal Flow Example

[] == false

Step-by-step:

1. [] → ToPrimitive → ""
2. "" → ToNumber → 0
3. false → ToNumber → 0
4. 0 == 0 → true

🧠 Real Mental Model

Think like this:

JS tries to normalize types before performing operations

⚡** Common Pitfalls**

❌ Unexpected coercion

[] + [] // ""
[] + {} // "[object Object]"

❌ Boolean confusion

Boolean("0") // true
Boolean(0)   // false

🧭 Best Practices

✅ Use strict equality
=== instead of ==
✅ Convert explicitly
Number(value)
String(value)
Boolean(value)

❌ Avoid relying on implicit coercion

🎯 Final Insight

Coercion is not random—it follows strict internal rules:

Object → Primitive → Number/String → Operation