Operators and Expressions

// Normal arithmetic
console.log(10 + 5);    // 15
console.log(10 - 5);    // 5
console.log(10 * 5);    // 50
console.log(10 / 3);    // 3.3333...
console.log(10 % 3);    // 1 (remainder)
console.log(2 ** 10);   // 1024

// The + trap with strings
console.log(5 + 3);         // 8 (number + number = addition)
console.log("5" + 3);       // "53" (string + number = concatenation)
console.log(5 + "3");       // "53" (number + string = concatenation)
console.log(5 + 3 + "px"); // "8px" (5+3=8, then 8+"px"="8px")
console.log("{{CODE_EXAMPLES_HTML}}quot; + 5 + 3);  // "$53" ("{{CODE_EXAMPLES_HTML}}quot;+5="$5", then "$5"+3="$53")

// Loose equality (==) converts types
console.log(5 == "5");       // true (string converted to number)
console.log(0 == false);     // true (false converted to 0)
console.log("" == false);    // true (both become 0)
console.log(null == undefined); // true (special rule)
console.log(0 == "");        // true (empty string becomes 0)

// Strict equality (===) checks type AND value
console.log(5 === "5");      // false (number vs string)
console.log(0 === false);    // false (number vs boolean)
console.log("" === false);   // false (string vs boolean)
console.log(null === undefined); // false (different types)
console.log(0 === "");       // false (number vs string)

// The confusing matrix with ==
console.log("0" == false);   // true
console.log("0" == 0);       // true
console.log(false == 0);     // true
console.log("0" == "");      // false! (this breaks the pattern)

// && returns first falsy value, or last value if all truthy
console.log("Aarav" && "Priya");    // "Priya" (both truthy, returns last)
console.log(0 && "Priya");          // 0 (first is falsy, returns it)
console.log("Aarav" && 0 && "Hi");  // 0 (stops at first falsy)

// || returns first truthy value, or last value if all falsy
console.log("" || "Guest");          // "Guest" (first is falsy, tries second)
console.log("Rohan" || "Guest");    // "Rohan" (first is truthy, returns it)
console.log(0 || "" || "Default");  // "Default" (first truthy value)
console.log(0 || "" || null);       // null (all falsy, returns last)

// Practical patterns
let username = "" || "Anonymous";     // "Anonymous"
let score = 0 || 100;                // 100 (BUG! 0 was a valid score)

// ! (NOT) converts to boolean and flips
console.log(!true);     // false
console.log(!0);        // true (0 is falsy)
console.log(!"hello");  // false (non-empty string is truthy)
console.log(!!"hello"); // true (double NOT = convert to boolean)

let age = 16;

// Basic ternary
let status = age >= 18 ? "adult" : "minor";
console.log(status);  // "minor"

// Ternary in template literals
console.log(`Vikram is ${age >= 18 ? 'an adult' : 'a minor'}`);

// Ternary for setting classes (common in web dev)
let theme = "dark";
let className = theme === "dark" ? "bg-dark text-white" : "bg-light text-dark";
console.log(className);

// Nested ternary (readable but do not overdo it)
let score = 85;
let grade = score >= 90 ? "A" :
            score >= 80 ? "B" :
            score >= 70 ? "C" :
            score >= 60 ? "D" : "F";
console.log(`Score: ${score}, Grade: ${grade}`);

// Using ternary in HTML updates
// document.getElementById("status").textContent = isOnline ? "Online" : "Offline";

// || treats ALL falsy values as "missing"
let count1 = 0;
console.log(count1 || 10);  // 10 (BUG: 0 is valid but treated as falsy)

let text1 = "";
console.log(text1 || "default");  // "default" (BUG: empty string might be valid)

// ?? only treats null and undefined as "missing"
let count2 = 0;
console.log(count2 ?? 10);  // 0 (correct: 0 is kept)

let text2 = "";
console.log(text2 ?? "default");  // "" (correct: empty string is kept)

let data = null;
console.log(data ?? "fallback");  // "fallback" (null triggers ??)

let nothing = undefined;
console.log(nothing ?? "fallback");  // "fallback" (undefined triggers ??)

// Real-world example
let settings = { volume: 0, name: "" };
let volume = settings.volume ?? 50;  // 0 (preserves the setting)
let name = settings.name ?? "User";  // "" (preserves empty name)
console.log(volume, name);

let student = {
  name: "Ananya",
  address: {
    city: "Mumbai"
  }
};

// Normal access (works fine)
console.log(student.name);           // "Ananya"
console.log(student.address.city);   // "Mumbai"

// Accessing something that does not exist
// console.log(student.phone.number);  // TypeError: Cannot read property 'number' of undefined

// Safe access with ?.
console.log(student.phone?.number);   // undefined (no error!)
console.log(student.address?.city);   // "Mumbai" (works normally when path exists)
console.log(student.grades?.math);    // undefined

// Works with methods too
let arr = [1, 2, 3];
console.log(arr.find?.(x => x > 2));  // 3

let obj = {};
console.log(obj.greet?.());           // undefined (method does not exist)

// Combining with ??
let city = student.phone?.city ?? "Unknown city";
console.log(city);  // "Unknown city"

// All 6 falsy values
console.log("=== Falsy values ===");
console.log(Boolean(false));      // false
console.log(Boolean(0));          // false
console.log(Boolean(-0));         // false
console.log(Boolean(""));         // false
console.log(Boolean(null));       // false
console.log(Boolean(undefined));  // false
console.log(Boolean(NaN));        // false

// Surprising truthy values
console.log("\n=== Truthy (surprising) ===");
console.log(Boolean("0"));        // true! (non-empty string)
console.log(Boolean(" "));        // true! (space is not empty)
console.log(Boolean("false"));    // true! (the word false is a non-empty string)
console.log(Boolean([]));         // true! (empty array)
console.log(Boolean({}));         // true! (empty object)
console.log(Boolean(-1));         // true! (any non-zero number)
console.log(Boolean(Infinity));   // true!

// Practical: checking if a value exists
let input = "";
if (input) {
  console.log("Has value");
} else {
  console.log("Empty or missing");  // This runs (empty string is falsy)
}

// Basic increment and decrement
let a = 5;
a++;  // a is now 6
console.log(a);  // 6
a--;  // a is now 5 again
console.log(a);  // 5

// Postfix (x++): returns OLD value, then increments
let x = 10;
let y = x++;   // y gets 10 (old value), THEN x becomes 11
console.log("x:", x, "y:", y);  // x: 11, y: 10

// Prefix (++x): increments FIRST, then returns NEW value
let m = 10;
let n = ++m;   // m becomes 11 FIRST, then n gets 11
console.log("m:", m, "n:", n);  // m: 11, n: 11

// This matters in expressions
let count = 0;
console.log(count++);  // 0 (returns old value)
console.log(count);    // 1 (incremented after)
console.log(++count);  // 2 (increments first, returns new value)