🔍 Chapter 5: Scope, Hoisting & TDZ

// Global scope - accessible everywhere
const globalVar = "I'm global!";
var alsoGlobal = "Me too!";

function testGlobal() {
    console.log(globalVar); // ✅ Can access global variables
    console.log(alsoGlobal); // ✅ Can access global variables
}

testGlobal();
console.log(globalVar); // ✅ Accessible outside functions

// Be careful - implicit globals (avoid!)
function createImplicitGlobal() {
    implicitGlobal = "Oops, I'm global!"; // No var/let/const = global!
}

createImplicitGlobal();
console.log(implicitGlobal); // "Oops, I'm global!"

function outerFunction() {
    const outerVar = "I'm in outer function";
    
    function innerFunction() {
        const innerVar = "I'm in inner function";
        console.log(outerVar); // ✅ Can access outer scope
        console.log(innerVar); // ✅ Can access own scope
    }
    
    innerFunction();
    console.log(outerVar); // ✅ Can access own scope
    // console.log(innerVar); // ❌ ReferenceError!
}

outerFunction();
// console.log(outerVar); // ❌ ReferenceError!

// let and const are block-scoped
if (true) {
    let blockScoped = "I'm block scoped";
    const alsoBlockScoped = "Me too!";
    var functionScoped = "I'm function scoped";
    
    console.log(blockScoped); // ✅ Works inside block
}

// console.log(blockScoped); // ❌ ReferenceError!
// console.log(alsoBlockScoped); // ❌ ReferenceError!
console.log(functionScoped); // ✅ var leaks out of blocks!

// Same with loops
for (let i = 0; i < 3; i++) {
    // i is only accessible here
}
// console.log(i); // ❌ ReferenceError!

// But var leaks:
for (var j = 0; j < 3; j++) {
    // j will be accessible outside
}
console.log(j); // ✅ 3 (leaked out!)

const globalName = "Global Alice";

function outer() {
    const outerName = "Outer Bob";
    
    function inner() {
        const innerName = "Inner Charlie";
        
        // Scope chain: inner → outer → global
        console.log(innerName);  // "Inner Charlie"
        console.log(outerName);  // "Outer Bob"
        console.log(globalName); // "Global Alice"
    }
    
    return inner;
}

const innerFunc = outer();
innerFunc(); // Still has access to outer scope!

// What you write:
console.log(myVar); // undefined (not error!)
var myVar = "Hello";
console.log(myVar); // "Hello"

// What JavaScript actually does:
// var myVar; // Declaration hoisted to top
// console.log(myVar); // undefined
// myVar = "Hello"; // Assignment stays in place
// console.log(myVar); // "Hello"

// Function declarations are fully hoisted
console.log(hoistedFunction()); // "I'm hoisted!"

function hoistedFunction() {
    return "I'm hoisted!";
}

// Function expressions are NOT hoisted
// console.log(notHoisted()); // TypeError!

var notHoisted = function() {
    return "I'm not hoisted!";
};

// let and const are hoisted but in "Temporal Dead Zone"
console.log(typeof myVar); // "undefined"
console.log(typeof myLet); // ReferenceError!

var myVar = "var variable";
let myLet = "let variable";

// Example of TDZ
function demonstrateTDZ() {
    console.log(x); // ReferenceError! (TDZ)
    
    let x = "I'm in TDZ until this line";
    console.log(x); // "I'm in TDZ until this line"
}

// TDZ exists from start of scope until declaration
function showTDZ() {
    // TDZ starts here for 'temporal'
    
    console.log(typeof temporal); // ReferenceError!
    
    // Still in TDZ
    if (true) {
        console.log(typeof temporal); // ReferenceError!
        
        let temporal = "Now I exist!"; // TDZ ends here
        console.log(temporal); // "Now I exist!"
    }
}

showTDZ();

// const must be initialized when declared
// const uninitializedConst; // SyntaxError!

const properConst = "I'm properly initialized";

// const cannot be reassigned
// properConst = "New value"; // TypeError!

// Classic var problem
for (var i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log("var:", i); // 3, 3, 3 (all reference same i)
    }, 100);
}

// let creates new binding each iteration
for (let j = 0; j < 3; j++) {
    setTimeout(() => {
        console.log("let:", j); // 0, 1, 2 (each has own j)
    }, 100);
}

const global = "global";

function level1() {
    const level1Var = "level1";
    
    function level2() {
        const level2Var = "level2";
        
        function level3() {
            const level3Var = "level3";
            
            // Scope chain: level3 → level2 → level1 → global
            console.log(level3Var); // Found in level3
            console.log(level2Var); // Found in level2
            console.log(level1Var); // Found in level1
            console.log(global);    // Found in global
            // console.log(nonExistent); // ReferenceError!
        }
        
        level3();
    }
    
    level2();
}

level1();

const name = "Global";

function outer() {
    const name = "Outer";
    
    function inner() {
        const name = "Inner";
        console.log(name); // "Inner" (shadows outer scopes)
    }
    
    inner();
    console.log(name); // "Outer" (shadows global)
}

outer();
console.log(name); // "Global"

// Using IIFE to create private scope
const calculator = (function() {
    // Private variables
    let result = 0;
    
    // Private function
    function log(operation, value) {
        console.log(`${operation}: ${value}, result: ${result}`);
    }
    
    // Public API
    return {
        add(value) {
            result += value;
            log('add', value);
            return this; // For chaining
        },
        
        subtract(value) {
            result -= value;
            log('subtract', value);
            return this;
        },
        
        getResult() {
            return result;
        },
        
        reset() {
            result = 0;
            log('reset', 0);
            return this;
        }
    };
})();

// Usage
calculator.add(10).subtract(3).add(5);
console.log(calculator.getResult()); // 12

// Private variables are not accessible
// console.log(calculator.result); // undefined

function createCounter(initialValue = 0) {
    let count = initialValue;
    
    return {
        increment() {
            return ++count;
        },
        
        decrement() {
            return --count;
        },
        
        getValue() {
            return count;
        },
        
        reset() {
            count = initialValue;
            return count;
        }
    };
}

const counter1 = createCounter(5);
const counter2 = createCounter(10);

console.log(counter1.increment()); // 6
console.log(counter2.increment()); // 11
console.log(counter1.getValue());  // 6
console.log(counter2.getValue());  // 11

// Problem: All callbacks reference same variable
for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log("var i:", i); // 3, 3, 3
    }, 100);
}

// Solution 1: Use let
for (let i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log("let i:", i); // 0, 1, 2
    }, 100);
}

// Solution 2: IIFE with var
for (var i = 0; i < 3; i++) {
    (function(index) {
        setTimeout(function() {
            console.log("IIFE i:", index); // 0, 1, 2
        }, 100);
    })(i);
}

// Confusing hoisting behavior
var x = 1;

function confusing() {
    console.log(x); // undefined (not 1!)
    
    if (false) {
        var x = 2; // This declaration is hoisted!
    }
}

confusing();

// What actually happens:
function confusing() {
    var x; // Hoisted declaration
    console.log(x); // undefined
    
    if (false) {
        x = 2; // Assignment (never executed)
    }
}

// TDZ with default parameters
function tdz(a = b, b = 2) {
    return a + b;
}

// tdz(); // ReferenceError! b is in TDZ when a is initialized

// Correct order
function fixed(b = 2, a = b) {
    return a + b;
}

console.log(fixed()); // 4

// Mixing let and var
function mixedScope() {
    if (true) {
        var varVariable = "var";
        let letVariable = "let";
    }
    
    console.log(varVariable); // "var" (function scoped)
    // console.log(letVariable); // ReferenceError! (block scoped)
}

mixedScope();

// Use const by default
const API_URL = "https://api.example.com";
const users = []; // Reference won't change

// Use let when you need to reassign
let currentUser = null;
let counter = 0;

// Avoid var in modern JavaScript
// var oldStyle = "Don't use this";

// Keep variables in smallest possible scope
function processData(data) {
    // Don't declare everything at the top
    
    if (data.length === 0) {
        return [];
    }
    
    // Declare variables when needed
    const processed = [];
    
    for (let i = 0; i < data.length; i++) {
        const item = data[i]; // Block scoped
        
        if (item.isValid) {
            const transformed = transform(item); // Even smaller scope
            processed.push(transformed);
        }
    }
    
    return processed;
}

// Predict the output of each console.log

console.log(a); // ?
console.log(b); // ?
// console.log(c); // ?

var a = 1;
let b = 2;
const c = 3;

function hoistingTest() {
    console.log(a); // ?
    console.log(b); // ?
    
    var a = 10;
    let b = 20;
}

hoistingTest();

// What will this output?
const x = 'global';

function outer() {
    const x = 'outer';
    
    function inner() {
        console.log(x); // ?
    }
    
    return inner;
}

const fn = outer();
fn();

// Fix this code so it prints 0, 1, 2 instead of 3, 3, 3
for (var i = 0; i < 3; i++) {
    setTimeout(function() {
        console.log(i);
    }, 100);
}

// Provide at least 2 different solutions

// Create a function that returns an object with methods
// to increment, decrement, and get the current count
// The count should be private (not accessible from outside)

function createPrivateCounter(start = 0) {
    // Your code here
}

const counter = createPrivateCounter(5);
console.log(counter.increment()); // 6
console.log(counter.increment()); // 7
console.log(counter.decrement()); // 6
console.log(counter.getCount());  // 6
// console.log(counter.count); // Should be undefined

// Explain why this code throws an error and how to fix it

function example() {
    console.log(typeof myVar); // Works
    console.log(typeof myLet); // ReferenceError - why?
    
    var myVar = "var";
    let myLet = "let";
}

example();

Variable Declarations
├── var
│   ├── Function scoped
│   ├── Hoisted with undefined
│   ├── Can be redeclared
│   └── Can be reassigned
├── let
│   ├── Block scoped
│   ├── Hoisted but in TDZ
│   ├── Cannot be redeclared
│   └── Can be reassigned
└── const
    ├── Block scoped
    ├── Hoisted but in TDZ
    ├── Cannot be redeclared
    ├── Cannot be reassigned
    └── Must be initialized