console.log('1: Sync');

setTimeout(() => console.log('2: Macrotask'), 0);

Promise.resolve().then(() => console.log('3: Microtask 1'))
  .then(() => console.log('4: Microtask 2'));

console.log('5: Sync');

// Output: 1, 5, 3, 4, 2
// All sync code runs first (1, 5)
// Then ALL microtasks drain (3, 4)
// Finally ONE macrotask executes (2)

// This BLOCKS the event loop forever -- no macrotasks
// or renders will ever run
function infiniteMicrotasks() {
  Promise.resolve().then(() => infiniteMicrotasks());
}
infiniteMicrotasks();
// setTimeout callbacks? Never fire.
// UI rendering? Frozen.
// This is worse than an infinite sync loop because
// it is harder to diagnose.

console.log(a);       // undefined (var hoisted, initialized to undefined)
console.log(greet()); // "hello" (function declaration fully hoisted)
console.log(b);       // ReferenceError: Cannot access 'b' before initialization

var a = 5;
let b = 10;

function greet() { return "hello"; }

// Function EXPRESSION -- NOT hoisted
console.log(sayBye); // undefined (var is hoisted, but assignment is not)
var sayBye = function() { return "bye"; };

// The TDZ exists from the start of the scope
// until the declaration is executed
{
  // TDZ for 'x' starts here
  console.log(typeof x); // ReferenceError! Not even typeof is safe
  let x = 10;            // TDZ ends here
}

// Compare with var:
console.log(typeof y); // "undefined" -- no error, even if y does not exist

function createCounter() {
    let count = 0; // Private -- no way to access from outside
    return {
        inc: () => ++count,
        get: () => count,
        reset: () => { count = 0; }
    };
}

const counter = createCounter();
counter.inc(); // 1
counter.inc(); // 2
counter.get(); // 2
// 'count' is NOT accessible from outside, but persists in memory
// This is the Module Pattern -- JS's original way of achieving encapsulation

function createFunctions() {
    const fns = [];
    for (var i = 0; i < 3; i++) {
        fns.push(() => console.log(i));
    }
    return fns;
}
createFunctions().forEach(fn => fn()); // 3, 3, 3 (NOT 0, 1, 2)
// All three closures reference the SAME 'i' variable
// By the time they execute, i === 3

// Fix 1: Use let (block scope creates new binding per iteration)
for (let i = 0; i < 3; i++) { /* ... */ }

// Fix 2: IIFE creates a new scope per iteration
for (var i = 0; i < 3; i++) {
    (function(j) { fns.push(() => console.log(j)); })(i);
}

function heavyOperation() {
    const largeArray = new Array(1000000).fill('data'); // ~8MB
    const config = { key: 'value' };
    
    return function() {
        // This closure keeps largeArray AND config in memory
        return largeArray.length;
    };
}

const fn = heavyOperation();
// largeArray cannot be garbage collected while fn exists
// Even though 'config' is never used by the inner function,
// some engines keep it alive too (V8 is smart enough to optimize
// this in many cases, but not always)

// Express.js middleware that leaked 2GB over 48 hours
function createLogger(req) {
    const requestBody = req.body; // Could be 10MB file upload
    const startTime = Date.now();
    
    return function logResponse(res) {
        // Closure keeps entire requestBody in memory
        // until this function is GC'd
        console.log(`${Date.now() - startTime}ms`);
        // requestBody is never used but never released
    };
}

// Fix: only close over what you need
function createLogger(req) {
    const bodySize = req.body?.length || 0; // Capture the value, not the object
    const startTime = Date.now();
    
    return function logResponse(res) {
        console.log(`${bodySize} bytes in ${Date.now() - startTime}ms`);
    };
}

const obj = {
    name: 'Object',
    regular: function() { console.log(this.name); },
    arrow: () => { console.log(this.name); }
};

obj.regular();  // 'Object' (implicit: obj is left of dot)
obj.arrow();    // undefined (lexical this = module/window scope, not obj)

const fn = obj.regular;
fn();           // undefined in strict mode (default binding -- context lost!)

// Explicit binding overrides default
fn.call(obj);   // 'Object'
fn.apply(obj);  // 'Object'

const bound = fn.bind(obj);
bound();        // 'Object' (permanently bound, cannot be overridden)

// Even 'new' cannot override bind... or can it?
// Actually, 'new' DOES override bind -- this is an edge case:
const BoundConstructor = function(name) { this.name = name; }.bind({ name: 'ignored' });
const instance = new BoundConstructor('wins');
console.log(instance.name); // 'wins' -- new binding trumps bind

class EventTracker {
    constructor() {
        this.events = [];
    }

    // Regular method -- 'this' depends on call site
    trackEvent(event) {
        this.events.push(event); // works when called as tracker.trackEvent()
    }
}

const tracker = new EventTracker();

// Passing as callback LOSES implicit binding
document.addEventListener('click', tracker.trackEvent);
// When the click fires: this === the DOM element, not tracker
// TypeError: Cannot read properties of undefined (reading 'push')

// Fix 1: bind in constructor
constructor() {
    this.trackEvent = this.trackEvent.bind(this);
}

// Fix 2: Arrow function class field (most common in React)
trackEvent = (event) => {
    this.events.push(event); // 'this' is always the instance
}

// Fix 3: Wrapper arrow at call site
document.addEventListener('click', (e) => tracker.trackEvent(e));

function Animal(name) {
    this.name = name;
}
Animal.prototype.speak = function() {
    console.log(`${this.name} makes a sound`);
};

function Dog(name, breed) {
    Animal.call(this, name); // "super" -- borrow Animal's constructor
    this.breed = breed;
}

// Wire up the chain -- Dog instances delegate to Animal.prototype
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog; // Fix the constructor reference

Dog.prototype.bark = function() {
    console.log(`${this.name} barks!`);
};

const dog = new Dog('Rex', 'Lab');
dog.bark();  // Own prototype method
dog.speak(); // Inherited from Animal.prototype
dog.toString(); // Inherited from Object.prototype
// Chain: dog -> Dog.prototype -> Animal.prototype -> Object.prototype -> null

class Animal {
    constructor(name) { this.name = name; }
    speak() { console.log(`${this.name} makes a sound`); }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name); // Must call before using 'this'
        this.breed = breed;
    }
    bark() { console.log(`${this.name} barks!`); }
}

// Prove it is the same mechanism:
console.log(typeof Dog); // "function" -- classes are functions
console.log(Dog.prototype.__proto__ === Animal.prototype); // true

// Step 1: Open DevTools -> Memory tab
// Step 2: Take Heap Snapshot (baseline)
// Step 3: Perform the action that leaks (navigate, click, etc.)
// Step 4: Take another Heap Snapshot
// Step 5: Select "Objects allocated between Snapshot 1 and 2"
// Step 6: Sort by "Retained Size" -- largest items are your suspects
// Step 7: Check "Retainers" panel to see what is keeping them alive

// GOOD: Same shape -- both share one hidden class
function Point(x, y) {
    this.x = x; // HC0 -> HC1 (has x)
    this.y = y; // HC1 -> HC2 (has x, y)
}
const p1 = new Point(1, 2); // Uses HC2
const p2 = new Point(3, 4); // Reuses HC2 -- fast!

// BAD: Different property order -> different hidden classes
const p3 = {};
p3.x = 1; // HC0 -> HC3 (has x -- same as HC1? No, different starting object shape)
p3.y = 2; // HC3 -> HC4

const p4 = {};
p4.y = 2; // HC0 -> HC5 (has y)
p4.x = 1; // HC5 -> HC6 (has y, x -- different order!)
// p3 and p4 have DIFFERENT hidden classes even though they have the same properties

// Monomorphic access (one hidden class) -- ~10ns per access
const points = Array.from({ length: 1000000 }, (_, i) => new Point(i, i));
let sum = 0;
for (const p of points) sum += p.x; // V8 caches the offset for p.x

// Polymorphic access (4+ hidden classes) -- ~50-100ns per access
const mixed = points.map((p, i) => {
    const obj = {};
    if (i % 4 === 0) { obj.x = p.x; obj.y = p.y; }
    else if (i % 4 === 1) { obj.y = p.y; obj.x = p.x; }
    else if (i % 4 === 2) { obj.x = p.x; obj.y = p.y; obj.z = 0; }
    else { obj.a = 0; obj.x = p.x; obj.y = p.y; }
    return obj;
});
for (const p of mixed) sum += p.x; // V8 cannot cache -- megamorphic

// This function gets JIT'd after ~hundreds of calls
function add(a, b) {
    return a + b;
}

// Hot loop -- TurboFan sees: a is always SMI, b is always SMI
for (let i = 0; i < 100000; i++) {
    add(i, i + 1);
}
// TurboFan emits optimized machine code: integer ADD, no type checks

// Now break the assumption
add("hello", "world"); // DEOPT! String concatenation, not integer add
// V8 discards optimized code, falls back to Ignition
// If this call site stays polymorphic, TurboFan won't re-optimize it

function getX(obj) { return obj.x; }

// Monomorphic: one hidden class -- FASTEST (~10ns)
const pointA = { x: 1, y: 2 };
for (let i = 0; i < 1e6; i++) getX(pointA);

// Polymorphic: 2-4 hidden classes -- slower (~30ns)
const pointB = { x: 1, y: 2, z: 3 }; // different shape
for (let i = 0; i < 1e6; i++) getX(i % 2 ? pointA : pointB);

// Megamorphic: 5+ hidden classes -- SLOWEST (~80ns, generic lookup)
const shapes = [
    { x: 1 }, { x: 1, a: 2 }, { x: 1, b: 3 },
    { x: 1, c: 4 }, { x: 1, d: 5 }, { x: 1, e: 6 }
];
for (let i = 0; i < 1e6; i++) getX(shapes[i % 6]);

// 1. Private data (used by Babel for private class fields polyfill)
const privateData = new WeakMap();
class User {
    constructor(name, ssn) {
        this.name = name;
        privateData.set(this, { ssn }); // Truly private, GC-friendly
    }
    getSSN() { return privateData.get(this).ssn; }
}
// When a User instance is GC'd, its private data is automatically cleaned up

// 2. DOM metadata without memory leaks
const nodeMetadata = new WeakMap();
function trackElement(el) {
    nodeMetadata.set(el, { clickCount: 0, lastInteraction: Date.now() });
}
// When the DOM element is removed and GC'd, metadata is cleaned up automatically
// Compare with Map: the element would stay in memory forever

// 3. Memoization that does not leak
const cache = new WeakMap();
function expensiveCompute(obj) {
    if (cache.has(obj)) return cache.get(obj);
    const result = /* heavy computation */;
    cache.set(obj, result);
    return result;
}
// When obj is no longer referenced elsewhere, the cache entry is cleaned up

class MyPromise {
    constructor(executor) {
        this.state = 'PENDING';
        this.value = undefined;
        this.handlers = [];

        const resolve = (val) => {
            if (this.state !== 'PENDING') return; // Ignore if already settled
            this.state = 'FULFILLED';
            this.value = val;
            // Schedule handlers as microtasks
            this.handlers.forEach(h => queueMicrotask(() => h.onFulfill(val)));
        };

        const reject = (reason) => {
            if (this.state !== 'PENDING') return;
            this.state = 'REJECTED';
            this.value = reason;
            this.handlers.forEach(h => queueMicrotask(() => h.onReject(reason)));
        };

        try {
            executor(resolve, reject);
        } catch (err) {
            reject(err); // If executor throws, promise rejects
        }
    }

    then(onFulfill, onReject) {
        // then() MUST return a new promise (chaining)
        return new MyPromise((resolve, reject) => {
            const handle = {
                onFulfill: (val) => {
                    try {
                        const result = onFulfill ? onFulfill(val) : val;
                        resolve(result);
                    } catch (err) { reject(err); }
                },
                onReject: (reason) => {
                    try {
                        const result = onReject ? onReject(reason) : reason;
                        onReject ? resolve(result) : reject(result);
                    } catch (err) { reject(err); }
                }
            };

            if (this.state === 'PENDING') {
                this.handlers.push(handle);
            } else if (this.state === 'FULFILLED') {
                queueMicrotask(() => handle.onFulfill(this.value));
            } else {
                queueMicrotask(() => handle.onReject(this.value));
            }
        });
    }

    catch(onReject) { return this.then(null, onReject); }
    finally(cb) { return this.then(val => { cb(); return val; }, err => { cb(); throw err; }); }
}

// What you write:
async function fetchUser(id) {
    const response = await fetch(`/api/users/${id}`);
    const user = await response.json();
    return user;
}

// What the engine effectively does (simplified):
function fetchUser(id) {
    return new Promise((resolve, reject) => {
        const gen = function*() {
            const response = yield fetch(`/api/users/${id}`);
            const user = yield response.json();
            return user;
        }();
        function step(result) {
            if (result.done) return resolve(result.value);
            Promise.resolve(result.value).then(
                val => step(gen.next(val)),
                err => step(gen.throw(err))
            );
        }
        step(gen.next());
    });
}

// BAD: Sequential -- total time = fetchUser + fetchOrders + fetchReviews
async function loadDashboard(userId) {
    const user = await fetchUser(userId);       // 200ms
    const orders = await fetchOrders(userId);   // 300ms
    const reviews = await fetchReviews(userId); // 150ms
    return { user, orders, reviews };
    // Total: 650ms -- each waits for the previous to finish
}

// GOOD: Parallel -- total time = max(fetchUser, fetchOrders, fetchReviews)
async function loadDashboard(userId) {
    const [user, orders, reviews] = await Promise.all([
        fetchUser(userId),     // 200ms
        fetchOrders(userId),   // 300ms (starts immediately)
        fetchReviews(userId),  // 150ms (starts immediately)
    ]);
    return { user, orders, reviews };
    // Total: 300ms -- 2.2x faster! At scale, this adds up.
}

// NUANCED: Sometimes you need partial parallelism
async function checkout(userId) {
    const user = await fetchUser(userId); // Need user first
    // These two depend on user but not on each other:
    const [cart, address] = await Promise.all([
        fetchCart(user.cartId),
        fetchAddress(user.addressId),
    ]);
    return { user, cart, address };
}

// Pattern 1: try/catch (most common)
async function fetchData() {
    try {
        const res = await fetch('/api/data');
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return await res.json();
    } catch (err) {
        // err could be network failure OR HTTP error OR JSON parse error
        logger.error('fetchData failed', { error: err.message });
        throw err; // Re-throw for caller to handle
    }
}

// Pattern 2: Go-style tuple (avoids try/catch nesting)
async function safeAsync(promise) {
    try {
        const data = await promise;
        return [data, null];
    } catch (err) {
        return [null, err];
    }
}
const [user, err] = await safeAsync(fetchUser(id));
if (err) return handleError(err);

// Promise.all -- Use when ALL results are required and any failure is fatal
// Example: Loading dashboard that needs user + permissions + config
const [user, perms, config] = await Promise.all([
    fetchUser(id),
    fetchPermissions(id),
    fetchConfig()
]);
// If ANY fails, the dashboard cannot render -- fail-fast is correct behavior

// Promise.allSettled -- Use when you want partial results despite failures
// Example: Sending notifications to multiple channels
const results = await Promise.allSettled([
    sendEmail(user),
    sendSMS(user),
    sendPush(user),
]);
const failures = results.filter(r => r.status === 'rejected');
if (failures.length) logger.warn(`${failures.length}/3 notifications failed`);
// You still want the successful ones to go through

// Promise.race -- Use for timeouts or "first response wins"
// Example: Timeout pattern
async function fetchWithTimeout(url, ms) {
    return Promise.race([
        fetch(url),
        new Promise((_, reject) =>
            setTimeout(() => reject(new Error('Timeout')), ms)
        )
    ]);
}
// Warning: the losing promise still runs! fetch continues even after timeout
// Use AbortController (see below) to actually cancel it

// Promise.any -- Use when you have redundant sources
// Example: Fastest CDN wins
const asset = await Promise.any([
    fetchFromCDN1(assetUrl),
    fetchFromCDN2(assetUrl),
    fetchFromCDN3(assetUrl),
]);
// Individual failures are ignored -- only fails if ALL three fail
// Throws AggregateError with all rejection reasons

// Basic usage
const controller = new AbortController();

fetch('/api/large-dataset', { signal: controller.signal })
    .then(res => res.json())
    .catch(err => {
        if (err.name === 'AbortError') {
            console.log('Request was cancelled');
        } else {
            throw err; // Re-throw real errors
        }
    });

// Cancel after 5 seconds
setTimeout(() => controller.abort(), 5000);

// Pattern 1: Race search -- cancel previous request on new keystroke
let currentController = null;

async function search(query) {
    // Cancel the previous request
    if (currentController) currentController.abort();
    currentController = new AbortController();

    try {
        const res = await fetch(`/api/search?q=${query}`, {
            signal: currentController.signal
        });
        return await res.json();
    } catch (err) {
        if (err.name === 'AbortError') return null; // Expected, ignore
        throw err;
    }
}

// Pattern 2: React useEffect cleanup
useEffect(() => {
    const controller = new AbortController();

    fetch('/api/data', { signal: controller.signal })
        .then(res => res.json())
        .then(data => setData(data))
        .catch(err => {
            if (err.name !== 'AbortError') setError(err);
        });

    return () => controller.abort(); // Cleanup on unmount or re-render
}, [dependency]);

// Pattern 3: AbortSignal.timeout() -- built-in timeout (modern browsers)
fetch('/api/data', { signal: AbortSignal.timeout(5000) });
// Automatically aborts after 5 seconds -- no manual controller needed

// Pattern 4: Combining multiple signals
const timeout = AbortSignal.timeout(5000);
const manual = new AbortController();
fetch('/api/data', {
    signal: AbortSignal.any([timeout, manual.signal])
});

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);

console.log('A');

setTimeout(() => console.log('B'), 0);

new Promise((resolve) => {
    console.log('C');   // This runs SYNCHRONOUSLY (inside the executor)
    resolve();
}).then(() => console.log('D'))
  .then(() => console.log('E'));

Promise.resolve().then(() => {
    console.log('F');
    setTimeout(() => console.log('G'), 0);
});

console.log('H');

// Output: A, C, H, D, F, E, G, B
// A -- sync
// C -- sync (Promise executor runs synchronously!)
// H -- sync
// D -- microtask (first .then of first promise)
// F -- microtask (first .then of second promise)
// E -- microtask (chained .then, scheduled after D ran)
// G -- macrotask (scheduled from within microtask F)
// B -- macrotask (the original setTimeout)

// BAD: 1000 listeners, 1000 closures, all need cleanup on re-render
document.querySelectorAll('.item').forEach(item => {
    item.addEventListener('click', handleClick);
});

// GOOD: 1 listener, handles all current AND future children
document.querySelector('.list').addEventListener('click', (e) => {
    const item = e.target.closest('.item'); // Find the actual item
    if (!item) return; // Click was not on an item
    handleClick(item.dataset.id);
});
// Benefits: less memory, handles dynamically added items, one cleanup

// Production-quality Debounce with cancel and flush
function debounce(fn, delay) {
    let timeoutId;
    const debounced = (...args) => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => fn(...args), delay);
    };
    debounced.cancel = () => clearTimeout(timeoutId);
    debounced.flush = (...args) => {
        clearTimeout(timeoutId);
        fn(...args);
    };
    return debounced;
}

// Production-quality Throttle (leading + trailing)
function throttle(fn, limit) {
    let inThrottle = false;
    let lastArgs = null;
    return (...args) => {
        if (!inThrottle) {
            fn(...args); // Leading call
            inThrottle = true;
            setTimeout(() => {
                inThrottle = false;
                if (lastArgs) {
                    fn(...lastArgs); // Trailing call with last args
                    lastArgs = null;
                }
            }, limit);
        } else {
            lastArgs = args; // Save latest args for trailing call
        }
    };
}

// Usage
const handleSearch = debounce(query => fetchResults(query), 300);
const handleScroll = throttle(() => updateScrollPosition(), 100);

// BAD: 1000 individual DOM mutations
// Each appendChild can trigger layout recalculation
const list = document.getElementById('list');
for (let i = 0; i < 1000; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    list.appendChild(li); // Triggers potential reflow each time
}

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li); // No reflow -- fragment is not in the DOM
}
list.appendChild(fragment); // ONE reflow for all 1000 items

const html = Array.from({ length: 1000 },
    (_, i) => `<li>Item ${i}</li>`
).join('');
list.innerHTML = html; // ONE parse + ONE reflow
// ~3-5x faster than DocumentFragment for large inserts
// But: destroys existing children's event listeners and state

list.style.display = 'none'; // Remove from render tree
// Do all mutations...
list.style.display = '';      // Re-add -- ONE reflow

// Batch mutations to happen just before the next paint
requestAnimationFrame(() => {
    items.forEach(item => list.appendChild(createNode(item)));
});

// Cross-tab communication via localStorage
// Tab 1: Write
localStorage.setItem('theme', 'dark');

// Tab 2: Listen for changes from other tabs
window.addEventListener('storage', (e) => {
    if (e.key === 'theme') {
        applyTheme(e.newValue); // 'dark'
    }
});
// Note: the 'storage' event does NOT fire in the tab that made the change

// Modern alternative for cross-tab communication: BroadcastChannel
const channel = new BroadcastChannel('app-events');
channel.postMessage({ type: 'THEME_CHANGE', theme: 'dark' });
channel.onmessage = (e) => applyTheme(e.data.theme);