Lesson 18: Mastering JavaScript Comparisons with challenges!

🧠 Internal Mechanics

1. Returns Boolean

All comparisons return true or false.

2. String Comparison

• Lexicographical order (like dictionary).

• Case-sensitive.

• Based on Unicode values.

'Z' > 'A'         // true
'apple' > 'pineapple' // false ('a' < 'p')
'2' > '12'        // true (because '2' > '1' in Unicode)

3. Different Types → Coercion (except with ===)

'2' > 1       // true → '2' gets converted to number 2
false == 0    // true → both converted to 0
true == 1     // true → both converted to 1

4. Strict Equality ===

• No coercion.

• Compares both value and type.

0 === false   // false
'5' === 5     // false

---

⚠️ Hidden Quirks and Gotchas

⚡ null and undefined

📌 Strict equality is safer.

---

🧪 Real-world Usage

• Form field values are usually strings. Comparing them to numbers can lead to tricky bugs.

• Defaulting behavior often checks == null to cover both null and undefined.

• Use === in most situations to avoid surprises.

• In conditionals, prefer truthiness/falsiness with care:

if (value != null) {
  // value is not null or undefined
}

---

🧩 Debugging Scenarios

1. "2" > "12" returns true
   → Because it's string comparison: '2' > '1' lexicographically.

2. null >= 0 is true, but null > 0 is false
   → Comparison uses numeric coercion but in subtly different ways.

3. undefined == 0 is false, but false == 0 is true
   → false → 0, but undefined only equals null in loose equality.

---

💼 Interview Prep Notes

✅ Do:

• Use === and !== by default.

• Check value == null to test for both null and undefined.

❌ Don’t:

• Use == unless you really know what it does.

• Compare potentially null/undefined values with <, >, <=, >= without safe-guards.

---

🧠 Mnemonics

• "== is loose, === is truth" – use === for strict, bug-free checks.

• "Falsy values can trick you!" – always test explicitly.

---

🎯 Tasks Recap (with Explanations)

5 > 4                // true       → obvious
"apple" > "pineapple" // false      → 'a' < 'p'
"2" > "12"           // true       → '2' > '1' (string comparison)
undefined == null    // true       → only values that are loosely equal to each other
undefined === null   // false      → different types
null == "\n0\n"      // false      → "\n0\n" becomes 0, null ≠ 0
null === +"\n0\n"    // false      → "\n0\n" → 0 → type mismatch with null

---

🧠 Bonus Mind Map

                   Comparisons in JS
                        |
     -----------------------------------------
    |                  |                      |
   Strict            Loose                Type Coercion
  (===, !==)         (==, !=)             -> Number for most ops
    |                  |
 Type + Value      Only Value             ⚠️ Tricky with null/undefined
 Match Needed      Tries to Convert