JavaScript Variables, Scope, and Closure

// var hoisting: declaration hoisted, initialized to undefined
console.log(x); // undefined (no error)
var x = 5;
console.log(x); // 5

// let/const TDZ: declaration hoisted but not initialized
// console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;
console.log(y); // 10

// Function declaration: fully hoisted
greet(); // "Hello" (works before declaration)
function greet() {
    console.log("Hello");
}

// Function expression: only variable hoisted
// sayHi(); // TypeError: sayHi is not a function
var sayHi = function() {
    console.log("Hi");
};
sayHi(); // "Hi"

// TDZ example with block scope
{
    // TDZ starts here for 'temp'
    // console.log(temp); // ReferenceError
    // const result = doSomething(temp); // ReferenceError
    
    let temp = 5; // TDZ ends here
    console.log(temp); // 5 (now accessible)
}

// Class TDZ
// const p = new Person(); // ReferenceError
class Person {
    constructor(name) { this.name = name; }
}
const p = new Person("John"); // Works after declaration

// Global scope
var globalVar = 'global var';
let globalLet = 'global let';
const globalConst = 'global const';

function demoScopes() {
    // Function scope
    var functionVar = 'function scoped';
    let functionLet = 'function scoped';
    
    console.log(globalVar); // Accessible
    
    if (true) {
        // Block scope
        var blockVar = 'not block scoped (var)';
        let blockLet = 'block scoped';
        const blockConst = 'block scoped';
        
        console.log(functionVar); // Accessible from outer function
        console.log(blockLet);    // Accessible within block
    }
    
    console.log(blockVar);  // Accessible (var ignores blocks)
    // console.log(blockLet); // ReferenceError (block-scoped)
    
    // Loop scope
    for (let i = 0; i < 3; i++) {
        // 'i' is block-scoped to this loop
        setTimeout(() => console.log(i), 100); // Prints 0, 1, 2
    }
    
    for (var j = 0; j < 3; j++) {
        // 'j' is function-scoped (shared)
        setTimeout(() => console.log(j), 100); // Prints 3, 3, 3
    }
}

// Module scope (in ES6 modules)
// Variables not automatically global
// export const moduleVar = 'exported';
// const privateVar = 'not exported';

// Catch block scope
try {
    throw new Error('test');
} catch (error) {
    // 'error' is scoped to catch block
    let catchVar = 'catch scoped';
    console.log(error.message);
}
// console.log(error); // ReferenceError
// console.log(catchVar); // ReferenceError

// Scope chain demonstration
const globalVar = 'global';

function outer() {
    const outerVar = 'outer';
    
    function middle() {
        const middleVar = 'middle';
        
        function inner() {
            const innerVar = 'inner';
            
            // Scope chain: inner → middle → outer → global
            console.log(innerVar);   // Found in inner scope
            console.log(middleVar);  // Found in middle scope (parent)
            console.log(outerVar);   // Found in outer scope (grandparent)
            console.log(globalVar);  // Found in global scope
            
            // Variable lookup order:
            // 1. Check inner scope
            // 2. Check middle scope
            // 3. Check outer scope
            // 4. Check global scope
            // 5. ReferenceError if not found
        }
        
        inner();
        // console.log(innerVar); // ReferenceError (not in scope chain)
    }
    
    middle();
}

outer();

// Lexical scope is determined by code structure
function makeCounter() {
    let count = 0; // In outer function scope
    
    return function() {
        // Lexically scoped to access 'count' from parent
        return ++count;
    };
}

const counter1 = makeCounter();
console.log(counter1()); // 1
console.log(counter1()); // 2

const counter2 = makeCounter();
console.log(counter2()); // 1 (separate scope chain)

// Scope determined at definition, not invocation
let x = 'global x';

function showX() {
    console.log(x); // Lexically bound to global 'x'
}

function demo() {
    let x = 'local x';
    showX(); // Prints "global x" (not "local x")
             // Scope determined where showX was defined
}

demo();

// Basic shadowing
let x = 'outer';

function demo() {
    let x = 'inner'; // Shadows outer 'x'
    console.log(x);  // "inner"
}

demo();
console.log(x); // "outer" (outer unchanged)

// Parameter shadowing
let value = 100;

function processValue(value) { // Parameter shadows outer 'value'
    console.log(value); // Uses parameter, not outer variable
    value = 200;        // Modifies parameter only
}

processValue(50);  // Prints 50
console.log(value); // 100 (outer unchanged)

// Block shadowing
let count = 10;

if (true) {
    let count = 20; // Shadows outer 'count' in block
    console.log(count); // 20
}

console.log(count); // 10 (outer restored after block)

// Nested function shadowing
function outer() {
    let name = 'outer';
    
    function inner() {
        let name = 'inner'; // Shadows parent function's 'name'
        console.log(name);  // "inner"
    }
    
    inner();
    console.log(name); // "outer"
}

outer();

// Loop variable shadowing
for (let i = 0; i < 3; i++) {
    console.log(i); // Loop 'i'
    
    for (let i = 0; i < 2; i++) {
        console.log('  ' + i); // Inner loop 'i' shadows outer
    }
}

// Problematic shadowing to avoid
function calculateTotal() {
    let total = 0;
    
    if (true) {
        let total = 100; // Shadowing can be confusing
        // Which 'total' is which?
    }
    
    return total; // Returns 0, not 100
}

// 1. Private variables pattern
function createCounter() {
    let count = 0; // Private variable
    
    return {
        increment: () => ++count,
        decrement: () => --count,
        getCount: () => count
    };
}

const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount());  // 2
// console.log(counter.count); // undefined (private)

// 2. Factory function pattern
function createUser(name) {
    let _name = name; // Private
    let _sessions = 0;
    
    return {
        getName: () => _name,
        login: () => ++_sessions,
        getSessions: () => _sessions
    };
}

const user1 = createUser("Alice");
const user2 = createUser("Bob");
user1.login();
console.log(user1.getSessions()); // 1
console.log(user2.getSessions()); // 0

// 3. Module pattern with IIFE
const calculator = (function() {
    let history = []; // Private state
    
    return {
        add: (a, b) => {
            const result = a + b;
            history.push(`${a} + ${b} = ${result}`);
            return result;
        },
        getHistory: () => [...history] // Return copy
    };
})();

calculator.add(5, 3);
console.log(calculator.getHistory()); // ["5 + 3 = 8"]

// 4. Callback closure preserving context
function fetchDataWithRetry(url, retries) {
    let attempts = 0; // Captured by callback
    
    function attemptFetch() {
        fetch(url)
            .catch(error => {
                if (++attempts < retries) {
                    console.log(`Retry ${attempts}`);
                    attemptFetch(); // Closure accesses 'attempts'
                }
            });
    }
    
    attemptFetch();
}

// 5. Currying with closures
function multiply(a) {
    return function(b) {
        return function(c) {
            return a * b * c;
        };
    };
}

const multiplyBy2 = multiply(2);
const multiplyBy2And3 = multiplyBy2(3);
console.log(multiplyBy2And3(4)); // 24

// 6. Memoization pattern
function memoize(fn) {
    const cache = {}; // Closure maintains cache
    
    return function(...args) {
        const key = JSON.stringify(args);
        if (key in cache) {
            return cache[key];
        }
        const result = fn(...args);
        cache[key] = result;
        return result;
    };
}

const factorial = memoize(n => n <= 1 ? 1 : n * factorial(n - 1));
console.log(factorial(5)); // Computed: 120
console.log(factorial(5)); // Cached: 120

// ===== math.js (Module A) =====
// Private variables (not exported)
const PI = 3.14159;
let calculationCount = 0;

// Private helper function
function log(operation) {
    calculationCount++;
    console.log(`Operation: ${operation}, Count: ${calculationCount}`);
}

// Named exports (public API)
export function add(a, b) {
    log('add');
    return a + b;
}

export function multiply(a, b) {
    log('multiply');
    return a * b;
}

export const TAU = 2 * PI; // Export constant

// Default export
export default function calculate(expr) {
    return eval(expr); // Example only
}

// ===== user.js (Module B) =====
// Module variables are isolated
const userCount = 0; // Won't conflict with other modules

class User {
    constructor(name) {
        this.name = name;
    }
}

export { User, userCount };

// ===== app.js (Main module) =====
// Import from math.js
import calculate, { add, multiply, TAU } from './math.js';
// Import from user.js
import { User, userCount } from './user.js';

// Module-scoped variables (private to this module)
const appName = 'MyApp';
let config = { debug: true };

console.log(add(5, 3));        // 8
console.log(multiply(2, 4));   // 8
console.log(TAU);              // 6.28318

// Cannot access private variables from math.js
// console.log(PI); // ReferenceError
// console.log(calculationCount); // ReferenceError

const user = new User('Alice');

// Top-level 'this' is undefined in modules
console.log(this); // undefined (not window)

// ===== Dynamic imports =====
async function loadModule() {
    if (config.debug) {
        const debugModule = await import('./debug.js');
        debugModule.log('Debug mode enabled');
    }
}

// ===== Barrel export pattern (index.js) =====
// Re-export from multiple modules
export { add, multiply } from './math.js';
export { User } from './user.js';
export { default as calculate } from './math.js';