Type Coercion

// JavaScript's "helpful" type conversion in action
console.log("5" + 3);    // "53" (string concatenation!)
console.log("5" - 3);    // 2 (numeric subtraction)
console.log([] == ![]);  // true (wait, what?!)

┌─────────────────────────────────────────────────────────────────────────┐
│                     THE OVERLY HELPFUL TRANSLATOR                        │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  YOU: "Hey JavaScript, add 5 and '3' together"                           │
│                                                                          │
│  JAVASCRIPT (thinking): "Hmm, one's a number, one's a string...          │
│                          I'll just convert the number to a string!       │
│                          '5' + '3' = '53'. You're welcome!"              │
│                                                                          │
│  YOU: "That's... not what I meant."                                      │
│                                                                          │
│  JAVASCRIPT: "¯\_(ツ)_/¯"                                                │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────────┐
│                    TYPE COERCION: THE SHAPESHIFTER                       │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│        ┌─────────┐                    ┌─────────┐                        │
│        │   "5"   │ ──── + 3 ────────► │  "53"   │  String won!           │
│        │ string  │                    │ string  │                        │
│        └─────────┘                    └─────────┘                        │
│                                                                          │
│        ┌─────────┐                    ┌─────────┐                        │
│        │   "5"   │ ──── - 3 ────────► │    2    │  Number won!           │
│        │ string  │                    │ number  │                        │
│        └─────────┘                    └─────────┘                        │
│                                                                          │
│        Same values, different operators, different results!              │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

// In JavaScript, variables can hold any type
let x = 42;       // x is a number
x = "hello";      // now x is a string
x = true;         // now x is a boolean

// So what happens here?
let result = x + 10;  // JavaScript must decide how to handle this

┌─────────────────────────────────────────────────────────────────────────┐
│                    THE THREE CONVERSION DESTINATIONS                     │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│                      ┌──────────────────────┐                            │
│                      │    ANY VALUE         │                            │
│                      │  (string, number,    │                            │
│                      │   object, array...)  │                            │
│                      └──────────┬───────────┘                            │
│                                 │                                        │
│                ┌────────────────┼────────────────┐                       │
│                ▼                ▼                ▼                       │
│          ┌──────────┐    ┌──────────┐    ┌──────────┐                    │
│          │  String  │    │  Number  │    │ Boolean  │                    │
│          │   "42"   │    │    42    │    │   true   │                    │
│          └──────────┘    └──────────┘    └──────────┘                    │
│                                                                          │
│          These are the ONLY three possible destinations!                 │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

// Explicit conversion
String(123)           // "123"
String(true)          // "true"
(123).toString()      // "123"

// Implicit conversion
123 + ""              // "123" (concatenation with empty string)
`Value: ${123}`       // "Value: 123" (template literal)
"Hello " + 123        // "Hello 123" (+ with a string)

// With two numbers: addition
5 + 3               // 8

// With any string involved: concatenation
"5" + 3             // "53" (3 becomes "3")
5 + "3"             // "53" (5 becomes "5")
"Hello" + " World"  // "Hello World"

// Order matters with multiple operands!
1 + 2 + "3"         // "33" (1+2=3, then 3+"3"="33")
"1" + 2 + 3         // "123" (all become strings left-to-right)

// Explicit conversion
Number("42")          // 42
parseInt("42px")      // 42 (stops at non-digit)
parseFloat("3.14")    // 3.14
+"42"                 // 42 (unary plus trick)

// Implicit conversion
"6" - 2               // 4 (subtraction)
"6" * 2               // 12 (multiplication)
"6" / 2               // 3 (division)
"6" % 4               // 2 (modulo)
"10" > 5              // true (comparison)
+"42"                 // 42 (unary plus)

"6" - "2"    // 4 (both become numbers)
"6" * "2"    // 12
"6" / "2"    // 3
"10" % "3"   // 1

// This is why - and + behave differently!
"5" + 3      // "53" (concatenation)
"5" - 3      // 2 (math)

+"42"        // 42
+true        // 1
+false       // 0
+null        // 0
+undefined   // NaN
+"hello"     // NaN
+""          // 0

// Explicit conversion
Boolean(1)            // true
Boolean(0)            // false
!!value               // double negation trick

// Implicit conversion
if (value) { }        // condition check
while (value) { }     // loop condition
value ? "yes" : "no"  // ternary operator
value && doSomething() // logical AND
value || defaultValue  // logical OR
!value                // logical NOT

// THE FALSY EIGHT
Boolean(false)        // false (obviously)
Boolean(0)            // false
Boolean(-0)           // false (yes, -0 exists)
Boolean(0n)           // false ([BigInt](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) zero)
Boolean("")           // false (empty string)
Boolean(null)         // false
Boolean(undefined)    // false
Boolean(NaN)          // false

// These are all TRUE!
Boolean(true)         // true (obviously)
Boolean(1)            // true
Boolean(-1)           // true (negative numbers!)
Boolean("hello")      // true
Boolean("0")          // true (non-empty string!)
Boolean("false")      // true (non-empty string!)
Boolean([])           // true (empty array!)
Boolean({})           // true (empty object!)
Boolean(function(){}) // true
Boolean(new Date())   // true
Boolean(Infinity)     // true
Boolean(-Infinity)    // true

// || returns the FIRST truthy value (or the last value)
"hello" || "world"    // "hello"
"" || "world"         // "world"
"" || 0 || null || "yes"  // "yes"

// && returns the FIRST falsy value (or the last value)
"hello" && "world"    // "world"
"" && "world"         // ""
1 && 2 && 3           // 3

// This is useful for defaults!
const name = userInput || "Anonymous";
const display = user && user.name;

// Arrays - toString() returns joined elements
[1, 2, 3].toString()   // "1,2,3"
[1, 2, 3] + ""         // "1,2,3"
[1, 2, 3] - 0          // NaN (can't convert "1,2,3" to number)

[].toString()          // ""
[] + ""                // ""
[] - 0                 // 0 (empty string → 0)

[1].toString()         // "1"
[1] - 0                // 1

// Plain objects - toString() returns "[object Object]"
({}).toString()        // "[object Object]"
({}) + ""              // "[object Object]"

// Dates - special case, prefers string for + operator
const date = new Date(0);
date.toString()        // "Thu Jan 01 1970 ..."
date.valueOf()         // 0 (timestamp in ms)

date + ""              // "Thu Jan 01 1970 ..." (uses toString)
date - 0               // 0 (uses valueOf)

const price = {
  amount: 99.99,
  currency: "USD",
  
  valueOf() {
    return this.amount;
  },
  
  toString() {
    return `${this.currency} ${this.amount}`;
  }
};

// Number conversion uses valueOf()
price - 0              // 99.99
price * 2              // 199.98
+price                 // 99.99

// String conversion uses toString()
String(price)          // "USD 99.99"
`Price: ${price}`      // "Price: USD 99.99"

// + is ambiguous, uses valueOf() if it returns primitive
price + ""             // "99.99" (valueOf returned number, then → string)

const obj = {
  [Symbol.toPrimitive](hint) {
    console.log(`Converting with hint: ${hint}`);
    
    if (hint === "number") {
      return 42;
    }
    if (hint === "string") {
      return "forty-two";
    }
    // hint === "default"
    return "default value";
  }
};

+obj           // 42 (hint: "number")
`${obj}`       // "forty-two" (hint: "string")
obj + ""       // "default value" (hint: "default")

// Example 1: "5" == 5
"5" == 5
// String vs Number → convert string to number
// 5 == 5
// Result: true

// Example 2: true == "1"
true == "1"
// Boolean involved → convert boolean to number first
// 1 == "1"
// Number vs String → convert string to number
// 1 == 1
// Result: true

// Example 3: [] == false
[] == false
// Boolean involved → convert boolean to number first
// [] == 0
// Object vs Number → convert object to primitive
// "" == 0 (empty array → empty string)
// String vs Number → convert string to number
// 0 == 0
// Result: true

// Example 4: [] == ![]
[] == ![]
// First, evaluate ![] → false (arrays are truthy)
// [] == false
// Boolean involved → false becomes 0
// [] == 0
// Object vs Number → [] becomes ""
// "" == 0
// String vs Number → "" becomes 0
// 0 == 0
// Result: true (yes, really!)

// 1. Checking for null OR undefined in one shot
if (value == null) {
  // This catches BOTH null and undefined
  // Much cleaner than: if (value === null || value === undefined)
}

// 2. Boolean context is natural and readable
if (user) {
  // Truthy check - totally fine
}

if (items.length) {
  // Checking if array has items - totally fine
}

// 3. Quick string conversion
const str = value + "";
// or
const str = String(value);
// or
const str = `${value}`;

// 4. Quick number conversion
const num = +value;
// or
const num = Number(value);

// BAD: Relying on == for type-unsafe comparisons
if (x == true) { }  // Don't do this!
if (x) { }          // Do this instead

// BAD: Using == with 0 or ""
if (x == 0) { }     // Matches "", but not null (null == 0 is false!)
if (x === 0) { }    // Clear intent

// BAD: Truthy check when you need specific type
function process(count) {
  if (!count) return;  // Fails for count = 0!
  // ...
}

function process(count) {
  if (typeof count !== "number") return;  // Better
  // ...
}