let a = 10;
let b = 20;

// Old way - concatenation (error-prone, hard to read)
console.log("The sum of " + a + " and " + b + " is " + (a + b));

// Template literal - clean and readable
console.log(`The sum of ${a} and ${b} is ${a + b}`);

// Old way
const html = '<div>\n' +
  '  <h1>Title</h1>\n' +
  '  <p>Content</p>\n' +
  '</div>';

// Template literal - preserves formatting
const html = `
  <div>
    <h1>Title</h1>
    <p>Content</p>
  </div>
`;

const user = { name: 'Alice', age: 30 };
console.log(`${user.name} is ${user.age > 18 ? 'an adult' : 'a minor'}`);
// "Alice is an adult"

console.log(`Total: $${(19.99 * 3).toFixed(2)}`);
// "Total: $59.97"

function highlight(strings, ...values) {
  return strings.reduce((result, str, i) => {
    return result + str + (values[i] ? `<mark>${values[i]}</mark>` : '');
  }, '');
}

const name = 'Alice';
const role = 'admin';
const output = highlight`User ${name} has role ${role}`;
// "User <mark>Alice</mark> has role <mark>admin</mark>"

greet(); // Works! Outputs: "Hello"

function greet() {
    console.log("Hello");
}

console.log(x); // undefined (declared, initialized to undefined)
var x = 10;

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 20;

console.log(z); // ReferenceError: Cannot access 'z' before initialization
const z = 30;

// TDZ for 'name' starts here
console.log(name); // ReferenceError -- we're in the TDZ
let name = 'Alice'; // TDZ ends here, 'name' is initialized

// This catches real bugs:
let count = 1;
if (true) {
    // TDZ for inner 'count' starts here
    console.log(count); // ReferenceError, NOT 1!
    let count = 2; // TDZ ends
}

sayHello(); // TypeError: sayHello is not a function
var sayHello = function() {
    console.log("Hello");
};
// 'sayHello' is hoisted as undefined (it's a var),
// but the function assignment hasn't happened yet

greetArrow(); // ReferenceError: Cannot access before initialization
const greetArrow = () => console.log("Hi");
// const is in TDZ

for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// Outputs: 3, 3, 3 (not 0, 1, 2!)
// 'var i' is function-scoped, so there's only ONE 'i'

for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// Outputs: 0, 1, 2
// 'let i' creates a new binding per iteration

if (true) {
    var a = 10;    // leaks out of the block
    let b = 20;    // stays in the block
    const c = 30;  // stays in the block
}

console.log(a); // 10 (accessible - function scoped)
console.log(b); // ReferenceError (block scoped)
console.log(c); // ReferenceError (block scoped)

const user = { name: 'Alice', age: 30 };

// This WORKS -- mutating the object
user.name = 'Bob';
user.role = 'admin';
console.log(user); // { name: 'Bob', age: 30, role: 'admin' }

// This FAILS -- reassigning the binding
user = { name: 'Charlie' }; // TypeError: Assignment to constant variable

// Same with arrays:
const numbers = [1, 2, 3];
numbers.push(4);        // Works: [1, 2, 3, 4]
numbers[0] = 99;        // Works: [99, 2, 3, 4]
numbers = [5, 6, 7];    // TypeError

// To make an object truly immutable:
const frozen = Object.freeze({ name: 'Alice', age: 30 });
frozen.name = 'Bob'; // Silently fails (or throws in strict mode)
// Note: Object.freeze is SHALLOW -- nested objects are still mutable

var apiKey = 'secret123';
console.log(window.apiKey); // 'secret123' -- exposed on the global object!

let safeKey = 'secret456';
console.log(window.safeKey); // undefined -- not on the global object

let age = 25;
let pi = 3.14;
let hex = 0xFF;             // 255
let infinity = Infinity;
let notANumber = NaN;       // typeof NaN === 'number' (the irony)
console.log(0.1 + 0.2);    // 0.30000000000000004 (IEEE 754 gotcha)
console.log(0.1 + 0.2 === 0.3); // false!

let name = 'John';
name[0] = 'X';        // Silently fails -- strings are immutable
console.log(name);     // Still 'John'
console.log(name.length); // 4 -- but beware of emoji:
console.log('😀'.length); // 2 (surrogate pair in UTF-16)

const id = Symbol('id');
const anotherId = Symbol('id');
console.log(id === anotherId); // false -- always unique

// Real use: framework-internal properties that don't clash
const INTERNAL_STATE = Symbol('state');
obj[INTERNAL_STATE] = 'active'; // Won't clash with user-defined keys
// Symbol.iterator, Symbol.asyncIterator -- built-in well-known symbols

const huge = 9007199254740991n;
console.log(huge + 1n); // 9007199254740992n (correct)
console.log(9007199254740991 + 1); // 9007199254740992 (correct by luck)
console.log(9007199254740991 + 2); // 9007199254740992 (WRONG!)

// Cannot mix BigInt and Number:
// console.log(1n + 1); // TypeError
console.log(1n + BigInt(1)); // 2n

// All of these are Objects:
let obj = { name: 'John' };
let arr = [1, 2, 3];           // typeof [] === 'object'
let fn = function() {};         // typeof function(){} === 'function' (special case)
let date = new Date();          // typeof new Date() === 'object'
let regex = /abc/;              // typeof /abc/ === 'object'
let map = new Map();
let set = new Set();

// Primitives: copied
let a = 10;
let b = a;
b = 20;
console.log(a); // 10 (unchanged)

// Objects: reference copied
let obj1 = { x: 10 };
let obj2 = obj1;
obj2.x = 20;
console.log(obj1.x); // 20 (changed! same reference)

// Array literal (preferred)
const fruits = ['apple', 'banana', 'orange'];

// Array constructor (avoid -- has a gotcha)
const numbers = new Array(1, 2, 3);
const confusing = new Array(3); // Creates [empty x 3], NOT [3]!

// Array.from -- converting iterables/array-likes to arrays
const chars = Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
const divs = Array.from(document.querySelectorAll('div'));

// Array.of -- fixes the constructor gotcha
const three = Array.of(3); // [3], not [empty x 3]

const fruits = ['apple', 'banana', 'orange'];

// Direct index access - O(1)
console.log(fruits[0]);             // 'apple'
console.log(fruits[fruits.length - 1]); // 'orange' (last element)
console.log(fruits.at(-1));         // 'orange' (ES2022 -- cleaner)

// for...of (preferred for values)
for (const fruit of fruits) {
    console.log(fruit);
}

// forEach (no break/continue support)
fruits.forEach((fruit, index) => {
    console.log(`${index}: ${fruit}`);
});

// for...in (AVOID for arrays -- iterates enumerable properties, not just indices)
// Can include prototype properties and non-integer keys

// MUTATING (change the original array):
// push, pop, shift, unshift, splice, sort, reverse, fill

// NON-MUTATING (return new array):
// map, filter, reduce, slice, concat, flat, flatMap, toSorted, toReversed

const nums = [3, 1, 4, 1, 5];
nums.sort();                    // MUTATES: nums is now [1, 1, 3, 4, 5]
const sorted = nums.toSorted(); // ES2023: returns new sorted array, original unchanged

const arr = [1, 2, 3, 4, 5];

arr.push(6);      // O(1) amortized -- fast, adds to end
arr.pop();        // O(1) -- fast, removes from end
arr.unshift(0);   // O(n) -- slow, shifts every element right
arr.shift();      // O(n) -- slow, shifts every element left
arr.splice(2, 1); // O(n) -- slow for large arrays at the beginning

// includes/indexOf: O(n) -- linear scan
// For frequent lookups, use a Set instead: O(1) average
const set = new Set(arr);
set.has(3); // O(1) vs arr.includes(3) which is O(n)

// String vs Number: string converted to number
'5' == 5           // true ('5' -> 5)
'' == 0            // true ('' -> 0)

// Boolean vs anything: boolean converted to number first
true == 1          // true (true -> 1)
false == 0         // true (false -> 0)
true == 'true'     // false! (true -> 1, 'true' -> NaN)

// null and undefined: equal to each other, nothing else
null == undefined  // true (special rule)
null == 0          // false
null == ''         // false
null == false      // false

// Object vs primitive: object converted via ToPrimitive (valueOf, then toString)
[1] == 1           // true ([1].valueOf() -> [1], [1].toString() -> '1', '1' -> 1)
[] == false        // true ([] -> '' -> 0, false -> 0)
[] == 0            // true

// The infamous gotchas:
'' == false        // true
' \t\n' == 0      // true (whitespace string coerces to 0)
[] == ![]          // true (yes, really)

// Step 1: ![] evaluates first. [] is truthy, so ![] = false
// Step 2: [] == false
// Step 3: false -> 0 (boolean to number)
// Step 4: [] == 0
// Step 5: [].toString() -> '' (ToPrimitive)
// Step 6: '' == 0
// Step 7: '' -> 0 (string to number)
// Step 8: 0 == 0 -> true

console.log('5' === 5);           // false (different types, stop)
console.log(true === 1);          // false
console.log(null === undefined);  // false
console.log(NaN === NaN);         // false (NaN is never equal to anything, including itself)

// To check for NaN:
console.log(Number.isNaN(NaN));   // true (use this, not isNaN())
console.log(Object.is(NaN, NaN)); // true (Object.is handles edge cases)

Object.is(NaN, NaN);   // true (unlike ===)
Object.is(0, -0);      // false (=== treats 0 and -0 as equal)
Object.is(null, null);  // true
// React uses Object.is internally for state comparison in hooks

// Coerces the argument to Number first, THEN checks for NaN
isNaN('hello');      // true  (Number('hello') -> NaN)
isNaN(undefined);    // true  (Number(undefined) -> NaN)
isNaN({});           // true  (Number({}) -> NaN)
isNaN('123');        // false (Number('123') -> 123)
isNaN('');           // false (Number('') -> 0)
isNaN(true);         // false (Number(true) -> 1)
isNaN(null);         // false (Number(null) -> 0)
isNaN('123abc');     // true  (Number('123abc') -> NaN)

// No coercion. Only returns true for the actual NaN value.
Number.isNaN(NaN);         // true
Number.isNaN('hello');     // false (it's a string, not NaN)
Number.isNaN(undefined);   // false
Number.isNaN(123);         // false
Number.isNaN('123');       // false

parseInt('abc');           // NaN
Math.sqrt(-1);             // NaN
0 / 0;                     // NaN
undefined + 1;             // NaN
Number('not a number');    // NaN

// NaN is "contagious" -- any operation with NaN produces NaN
NaN + 5;    // NaN
NaN * 100;  // NaN

typeof NaN; // 'number' -- NaN is technically a numeric type
// It represents "a numeric value that is not representable"
// Think of it as "invalid number" rather than "not a number"

function isValidNumber(value) {
    const parsed = Number(value);
    return !Number.isNaN(parsed) && Number.isFinite(parsed);
}

isValidNumber('42');       // true
isValidNumber('3.14');     // true
isValidNumber('hello');    // false
isValidNumber(Infinity);   // false
isValidNumber('');         // true (Number('') is 0 -- may want to handle this)

let x;                    // declared but not assigned
console.log(x);           // undefined

function greet(name) {
    console.log(name);    // undefined if not passed
}
greet();

const obj = { a: 1 };
console.log(obj.b);      // undefined (missing property)

function noReturn() {}
console.log(noReturn());  // undefined (no return statement)

let user = null;           // "We don't have a user yet"
let data = null;           // "We're about to fetch this"
element.onclick = null;    // "Remove the click handler"

// Common API pattern:
async function fetchUser(id) {
    const user = await db.users.findById(id);
    return user || null;   // Explicitly return null for "not found"
}

function greet(name = 'stranger') {
    console.log(`Hello, ${name}!`);
}

greet(undefined);  // "Hello, stranger!" -- undefined triggers the default
greet(null);       // "Hello, null!"      -- null does NOT trigger the default
greet();           // "Hello, stranger!" -- missing arg is undefined

const user = { name: 'Alice', address: null };

// Optional chaining (?.) -- short-circuits on null OR undefined
console.log(user.address?.city);          // undefined (doesn't throw)
console.log(user.profile?.avatar?.url);   // undefined

// Nullish coalescing (??) -- fallback only for null/undefined
const port = process.env.PORT ?? 3000;    // Uses 3000 only if PORT is null/undefined
const port2 = process.env.PORT || 3000;   // Uses 3000 if PORT is ANY falsy value (including 0, '')

// This difference matters:
const count = 0;
console.log(count || 10);  // 10 (0 is falsy -- probably a bug!)
console.log(count ?? 10);  // 0  (0 is not null/undefined -- correct!)

const obj = { a: 1, b: undefined, c: null };
JSON.stringify(obj); // '{"a":1,"c":null}'
// undefined properties are OMITTED, null is preserved
// This has API implications -- backend might treat missing vs null differently

// Primitives
typeof 42                 // 'number'
typeof 3.14              // 'number'
typeof NaN               // 'number'   (yes, "Not a Number" is a number type)
typeof 'hello'           // 'string'
typeof true              // 'boolean'
typeof undefined         // 'undefined'
typeof Symbol('id')      // 'symbol'
typeof 123n              // 'bigint'

// Objects and the gotchas
typeof null              // 'object'   (the famous bug)
typeof {}                // 'object'
typeof []                // 'object'   (arrays are objects)
typeof new Date()        // 'object'
typeof /regex/           // 'object'
typeof new Map()         // 'object'
typeof function(){}      // 'function' (special case -- technically an object)
typeof class Foo {}      // 'function' (classes are syntactic sugar for functions)

// This throws:
// console.log(someUndeclaredVar); // ReferenceError

// This doesn't:
console.log(typeof someUndeclaredVar); // 'undefined' (safe!)

// Useful pattern for feature detection:
if (typeof window !== 'undefined') {
    // We're in a browser environment
}
if (typeof process !== 'undefined') {
    // We're in Node.js
}

// For arrays
Array.isArray([1, 2, 3]);  // true
Array.isArray('hello');     // false

// For null
value === null;             // the only reliable way

// For NaN
Number.isNaN(value);        // true only for NaN itself

// For plain objects
Object.prototype.toString.call(value);
// Returns '[object Array]', '[object Null]', '[object Date]', etc.
// This is the most precise type check available

function typeOf(value) {
    return Object.prototype.toString.call(value)
        .slice(8, -1).toLowerCase();
}
typeOf([]);        // 'array'
typeOf(null);      // 'null'
typeOf(new Date()) // 'date'
typeOf(/regex/);   // 'regexp'

// instanceof (checks prototype chain, but fails cross-realm)
[] instanceof Array;     // true
({}) instanceof Object;  // true

// Safe environment detection (works in SSR/Node/Browser)
const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
const isNode = typeof process !== 'undefined' && process.versions?.node;

// Defensive function parameter checking
function processConfig(config) {
    if (typeof config === 'string') {
        config = JSON.parse(config);
    }
    if (typeof config !== 'object' || config === null) {
        throw new TypeError('Config must be an object');
    }
    // proceed
}

// Feature detection
if (typeof IntersectionObserver !== 'undefined') {
    // Use IntersectionObserver for lazy loading
} else {
    // Fallback to scroll events
}

const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);
console.log(doubled);  // [2, 4, 6, 8, 10]
console.log(numbers);  // [1, 2, 3, 4, 5] -- original unchanged

const result = ['a', 'b', 'c'].map((value, index, array) => {
    return `${index}: ${value} (of ${array.length})`;
});
// ['0: a (of 3)', '1: b (of 3)', '2: c (of 3)']

// API response transformation (extremely common in React)
const users = apiResponse.map(user => ({
    id: user.id,
    displayName: `${user.firstName} ${user.lastName}`,
    avatar: user.profilePic || '/default-avatar.png',
    isActive: user.lastLogin > Date.now() - 86400000,
}));

// Rendering lists in React
const UserList = ({ users }) => (
    <ul>
        {users.map(user => (
            <li key={user.id}>{user.displayName}</li>
        ))}
    </ul>
);

// map(): when you need a TRANSFORMED array (same length, different values)
const names = users.map(u => u.name);

// filter(): when you need a SUBSET (fewer items, same shape)
const active = users.filter(u => u.isActive);

// reduce(): when you need a SINGLE VALUE (aggregation, grouping)
const totalAge = users.reduce((sum, u) => sum + u.age, 0);

// forEach(): when you need SIDE EFFECTS (logging, DOM manipulation)
// forEach returns undefined -- if you're not using the return value, don't use map
users.forEach(u => console.log(u.name));

// for...of: when you need break/continue, or async iteration
for (const user of users) {
    if (user.isAdmin) break;
    await processUser(user);
}

// BAD: using map when you don't need the returned array
users.map(user => {
    console.log(user.name);  // side effect only, map is wasteful
});
// Creates an array of undefined values that's immediately discarded

// GOOD: use forEach for side effects
users.forEach(user => {
    console.log(user.name);
});

Array.prototype.myMap = function(callback, thisArg) {
    if (typeof callback !== 'function') {
        throw new TypeError(callback + ' is not a function');
    }
    const result = new Array(this.length);
    for (let i = 0; i < this.length; i++) {
        if (i in this) { // Skip holes in sparse arrays
            result[i] = callback.call(thisArg, this[i], i, this);
        }
    }
    return result;
};

Click on <button> inside <div> inside <body>:

CAPTURING:  window -> document -> html -> body -> div -> button
TARGET:     button (event fires on the actual target)
BUBBLING:   button -> div -> body -> html -> document -> window

// HTML: <div id="outer"><div id="inner">Click me</div></div>

document.getElementById('outer').addEventListener('click', () => {
    console.log('Outer (bubble)');
});
document.getElementById('inner').addEventListener('click', () => {
    console.log('Inner (bubble)');
});

// Click on inner div outputs:
// "Inner (bubble)"
// "Outer (bubble)"  -- event bubbled up

document.getElementById('outer').addEventListener('click', () => {
    console.log('Outer (capture)');
}, true);  // capture phase

document.getElementById('outer').addEventListener('click', () => {
    console.log('Outer (bubble)');
});  // default: bubble phase

document.getElementById('inner').addEventListener('click', () => {
    console.log('Inner');
});

// Click on inner:
// "Outer (capture)"  -- capture fires first (top-down)
// "Inner"            -- target phase
// "Outer (bubble)"   -- bubble fires last (bottom-up)

// stopPropagation: stops the event from continuing to the next element
// but other listeners on the SAME element still fire
inner.addEventListener('click', (e) => {
    e.stopPropagation();
    console.log('Handler 1');
});
inner.addEventListener('click', () => {
    console.log('Handler 2'); // Still fires!
});

// stopImmediatePropagation: stops everything -- no more handlers, no bubbling
inner.addEventListener('click', (e) => {
    e.stopImmediatePropagation();
    console.log('Handler 1');
});
inner.addEventListener('click', () => {
    console.log('Handler 2'); // Does NOT fire
});

document.getElementById('outer').addEventListener('click', (e) => {
    console.log('target:', e.target.id);         // What was actually clicked
    console.log('currentTarget:', e.currentTarget.id); // What this listener is on
});
// Click on inner: target = 'inner', currentTarget = 'outer'

// Array methods are the most common HOFs
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);     // map is a HOF
const evens = numbers.filter(num => num % 2 === 0); // filter is a HOF
const sum = numbers.reduce((acc, num) => acc + num, 0); // reduce is a HOF

// Custom HOF
function operate(a, b, operation) {
    return operation(a, b);
}
console.log(operate(5, 3, (x, y) => x + y));      // 8
console.log(operate(5, 3, (x, y) => x * y));      // 15

function createMultiplier(multiplier) {
    return function(number) {
        return number * multiplier;
    };
}

const double = createMultiplier(2);
const triple = createMultiplier(3);
console.log(double(5));  // 10
console.log(triple(5));  // 15

// Express middleware is a HOF pattern
function authMiddleware(requiredRole) {
    return function(req, res, next) {
        if (req.user?.role !== requiredRole) {
            return res.status(403).json({ error: 'Forbidden' });
        }
        next();
    };
}

app.get('/admin', authMiddleware('admin'), (req, res) => {
    res.json({ message: 'Welcome, admin' });
});

const compose = (...fns) => (x) => fns.reduceRight((acc, fn) => fn(acc), x);
const pipe = (...fns) => (x) => fns.reduce((acc, fn) => fn(acc), x);

const addTax = (price) => price * 1.1;
const formatCurrency = (amount) => `$${amount.toFixed(2)}`;
const applyDiscount = (price) => price * 0.9;

const calculatePrice = pipe(applyDiscount, addTax, formatCurrency);
console.log(calculatePrice(100)); // "$99.00"

function debounce(fn, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => fn.apply(this, args), delay);
    };
}

const handleSearch = debounce((query) => {
    fetch(`/api/search?q=${query}`);
}, 300);

// Without debounce: 50 keystrokes = 50 API calls
// With debounce: 50 keystrokes = 1 API call (300ms after last keystroke)

function memoize(fn) {
    const cache = new Map();
    return function(...args) {
        const key = JSON.stringify(args);
        if (cache.has(key)) return cache.get(key);
        const result = fn.apply(this, args);
        cache.set(key, result);
        return result;
    };
}

const expensiveCalc = memoize((n) => {
    console.log('Computing...');
    return n * n;
});
expensiveCalc(5); // "Computing..." -> 25
expensiveCalc(5); // 25 (cached, no log)

// Standard IIFE
(function() {
    const privateVar = 'secret';
    console.log(privateVar); // Accessible here
})();
// privateVar is not accessible here

// Arrow function IIFE
(() => {
    console.log('Executed immediately');
})();

// With arguments
(function(name) {
    console.log(`Hello, ${name}`);
})('Alice');

// With return value
const result = (function() {
    return 42;
})();
console.log(result); // 42

// library-a.js (before modules)
(function() {
    var helper = 'Library A helper'; // Private to this IIFE
    window.LibraryA = { /* public API */ };
})();

// library-b.js
(function() {
    var helper = 'Library B helper'; // Different variable, no collision
    window.LibraryB = { /* public API */ };
})();

const Counter = (function() {
    let count = 0; // Truly private -- no way to access from outside

    return {
        increment() { return ++count; },
        decrement() { return --count; },
        getCount() { return count; },
    };
})();

Counter.increment(); // 1
Counter.increment(); // 2
Counter.getCount();  // 2
// Counter.count      // undefined -- truly private

// 1. Top-level await workaround in older environments
(async () => {
    const data = await fetch('/api/config');
    const config = await data.json();
    initApp(config);
})();

// 2. Switch/case with block-scoped constants
const message = (() => {
    switch (status) {
        case 200: return 'OK';
        case 404: return 'Not Found';
        case 500: return 'Server Error';
        default: return 'Unknown';
    }
})();

// 3. Complex initialization of a const
const config = (() => {
    const env = process.env.NODE_ENV;
    if (env === 'production') {
        return { apiUrl: 'https://api.prod.com', debug: false };
    }
    return { apiUrl: 'http://localhost:3000', debug: true };
})();

const Module = (function() {
    function privateHelper() { /* ... */ }
    function doSomething() { privateHelper(); /* ... */ }
    function doSomethingElse() { /* ... */ }

    return {
        publicMethod: doSomething,
        anotherPublic: doSomethingElse,
        // privateHelper is not exposed
    };
})();

function outerFunction() {
    let outerVariable = "I'm from outer function";

    function innerFunction() {
        console.log(outerVariable); // Accesses outer variable via closure
    }

    return innerFunction;
}

const closureFunction = outerFunction();
// outerFunction has returned, its execution context is gone
// BUT outerVariable is still alive because innerFunction holds a closure over it
closureFunction(); // "I'm from outer function"

function createCounter() {
    let count = 0; // Truly private -- no way to access directly

    return {
        increment() { return ++count; },
        decrement() { return --count; },
        getCount() { return count; },
    };
}

const counter = createCounter();
counter.increment(); // 1
counter.increment(); // 2
counter.getCount();  // 2
// No way to access or modify 'count' directly

// BUG: All callbacks share the same 'i' variable
for (var i = 0; i < 5; i++) {
    setTimeout(() => console.log(i), 100);
}
// Output: 5, 5, 5, 5, 5

// FIX 1: Use let (creates new binding per iteration)
for (let i = 0; i < 5; i++) {
    setTimeout(() => console.log(i), 100);
}
// Output: 0, 1, 2, 3, 4

// FIX 2: IIFE to capture current value (pre-ES6 approach)
for (var i = 0; i < 5; i++) {
    (function(j) {
        setTimeout(() => console.log(j), 100);
    })(i);
}
// Output: 0, 1, 2, 3, 4

function useCounter(initial = 0) {
    const [count, setCount] = useState(initial);
    // These functions close over 'count' and 'setCount'
    const increment = useCallback(() => setCount(c => c + 1), []);
    const decrement = useCallback(() => setCount(c => c - 1), []);
    return { count, increment, decrement };
}

function setupLogger(userId) {
    // userId is captured by closure
    return function(event) {
        analytics.track({
            userId,  // Available via closure
            event: event.type,
            timestamp: Date.now(),
        });
    };
}
const logClick = setupLogger('user_123');
button.addEventListener('click', logClick);

function createApiClient(baseUrl) {
    // baseUrl captured by closure
    return {
        get: (path) => fetch(`${baseUrl}${path}`),
        post: (path, body) => fetch(`${baseUrl}${path}`, {
            method: 'POST',
            body: JSON.stringify(body),
        }),
    };
}
const api = createApiClient('https://api.example.com');
api.get('/users');  // Uses the captured baseUrl

function createHeavyClosure() {
    const hugeArray = new Array(1000000).fill('data');
    // This closure keeps hugeArray alive!
    return function() {
        return hugeArray.length;
    };
}
const fn = createHeavyClosure();
// hugeArray (several MB) stays in memory as long as 'fn' exists
// To release: fn = null;

console.log('Before');
setTimeout(() => {
    console.log('Timeout callback');
}, 2000);
console.log('After');

// Output (immediately):
// "Before"
// "After"
// (2+ seconds later): "Timeout callback"

let count = 0;
const intervalId = setInterval(() => {
    count++;
    console.log(`Tick ${count}`);
    if (count >= 5) {
        clearInterval(intervalId);
        console.log('Done');
    }
}, 1000);

console.log('Start');
setTimeout(() => console.log('Timer'), 0); // 0ms delay!
// Heavy synchronous work
for (let i = 0; i < 1000000000; i++) {} // Takes ~1 second
console.log('End');

// Output:
// "Start"
// "End" (after ~1 second of blocking)
// "Timer" (fires AFTER the blocking work, not at 0ms!)

// setInterval doesn't account for execution time
// If callback takes 300ms and interval is 1000ms,
// actual interval between starts is still 1000ms,
// but between end of one and start of next is only 700ms

// If callback takes LONGER than the interval, callbacks queue up
// and can fire back-to-back with no gap

// Better alternative: recursive setTimeout
function reliableInterval(fn, delay) {
    function tick() {
        fn();
        setTimeout(tick, delay); // Schedule AFTER execution
    }
    setTimeout(tick, delay);
}

// Even better: self-correcting timer
function preciseInterval(fn, interval) {
    let expected = Date.now() + interval;
    function step() {
        const drift = Date.now() - expected;
        fn();
        expected += interval;
        setTimeout(step, Math.max(0, interval - drift));
    }
    setTimeout(step, interval);
}

function debounce(fn, delay) {
    let timeoutId;
    return function(...args) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => fn.apply(this, args), delay);
    };
}

const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce((e) => {
    fetchResults(e.target.value); // Only fires 300ms after user stops typing
}, 300));

async function pollWithBackoff(fn, initialDelay = 1000, maxDelay = 30000) {
    let delay = initialDelay;
    async function poll() {
        try {
            const result = await fn();
            if (result.status === 'complete') return result;
            delay = Math.min(delay * 1.5, maxDelay); // Exponential backoff
        } catch (error) {
            delay = Math.min(delay * 2, maxDelay);
        }
        setTimeout(poll, delay);
    }
    poll();
}

function createRateLimiter(maxCalls, perMs) {
    const queue = [];
    let activeCount = 0;

    function processQueue() {
        while (queue.length > 0 && activeCount < maxCalls) {
            activeCount++;
            const { fn, resolve, reject } = queue.shift();
            fn().then(resolve).catch(reject).finally(() => {
                activeCount--;
                setTimeout(processQueue, perMs / maxCalls);
            });
        }
    }

    return function(fn) {
        return new Promise((resolve, reject) => {
            queue.push({ fn, resolve, reject });
            processQueue();
        });
    };
}
// Limits to 5 API calls per second
const limiter = createRateLimiter(5, 1000);

const fetchData = new Promise((resolve, reject) => {
    // Asynchronous work happens here
    setTimeout(() => {
        const success = Math.random() > 0.5;
        if (success) {
            resolve({ id: 1, name: 'Alice' }); // Fulfilled
        } else {
            reject(new Error('Failed to fetch')); // Rejected
        }
    }, 1000);
});

// Consuming
fetchData
    .then(data => console.log('Success:', data))
    .catch(error => console.error('Error:', error.message))
    .finally(() => console.log('Cleanup: always runs'));