JavaScript Scope and Hoisting Explained — How JS Really Reads Your Code

// --- GLOBAL SCOPE ---
const appName = 'TheCodeForge'; // visible everywhere in this file

function printWelcome() {
  // --- FUNCTION SCOPE ---
  // 'greeting' is born here and dies when printWelcome() finishes
  const greeting = `Welcome to ${appName}`; // can reach UP to global scope
  console.log(greeting);
}

printWelcome();
// console.log(greeting); // ❌ ReferenceError — greeting doesn't exist out here

// --- BLOCK SCOPE ---
const scores = [42, 87, 63];

for (let i = 0; i < scores.length; i++) {
  // 'i' and 'currentScore' only exist inside this loop block
  const currentScore = scores[i];
  console.log(`Score ${i + 1}: ${currentScore}`);
}

// console.log(i);            // ❌ ReferenceError — i is block-scoped
// console.log(currentScore); // ❌ ReferenceError — currentScore is block-scoped

// --- THE CLASSIC var LEAK ---
for (var legacyIndex = 0; legacyIndex < 3; legacyIndex++) {
  // var is NOT block-scoped, it leaks into the surrounding function (or global) scope
}
console.log('legacyIndex after loop:', legacyIndex); // 👀 prints 3, not an error

// Real-world example: a counter factory using closures
// The inner function 'increment' climbs the scope chain to find 'count'

function createCounter(startValue) {
  // 'count' lives in createCounter's function scope
  let count = startValue;

  // This returned function closes over 'count' — it holds a live reference,
  // not a snapshot. Every call to increment() reads and updates the SAME count.
  return function increment() {
    count += 1;
    return count;
  };
}

const pageViewCounter = createCounter(0);
const articleLikeCounter = createCounter(0);

console.log('Page views:', pageViewCounter()); // 1
console.log('Page views:', pageViewCounter()); // 2
console.log('Article likes:', articleLikeCounter()); // 1 — completely separate count
console.log('Page views:', pageViewCounter()); // 3

// Why does this work after createCounter() has finished?
// Because 'increment' still holds a reference to the scope where 'count' lives.
// The scope chain keeps that scope alive as long as any function references it.

// --- SCOPE CHAIN LOOKUP IN ACTION ---
const platformName = 'TheCodeForge'; // global scope

function outerSection() {
  const sectionTitle = 'JavaScript Basics'; // outerSection's scope

  function innerLesson() {
    const lessonName = 'Scope and Hoisting'; // innerLesson's scope

    // JS looks for each variable starting from innerLesson's scope
    // and climbs up until it finds it
    console.log(`${platformName} > ${sectionTitle} > ${lessonName}`);
    //            ^ found at global  ^ found at outer   ^ found locally
  }

  innerLesson();
}

outerSection();

// ============================================================
// FUNCTION DECLARATIONS — fully hoisted (name + body)
// ============================================================

// Calling the function BEFORE it appears in the source — this works!
console.log('Tax:', calculateTax(200, 0.2));

function calculateTax(amount, rate) {
  // The entire function body is hoisted, so it's available immediately
  return amount * rate;
}

// ============================================================
// var — declaration hoisted, value is NOT
// ============================================================

console.log('userName before assignment:', userName); // undefined — not an error!
// The engine sees: var userName = undefined; at the top of this scope
// The actual string assignment hasn't happened yet at this line

var userName = 'Alice';
console.log('userName after assignment:', userName); // Alice

// ============================================================
// let / const — hoisted but in the Temporal Dead Zone (TDZ)
// ============================================================

// Uncomment the next line to see the TDZ in action:
// console.log(userEmail); // ❌ ReferenceError: Cannot access 'userEmail' before initialization
// The engine knows 'userEmail' exists (it's hoisted) but blocks access until
// the declaration line is reached — this is the Temporal Dead Zone

let userEmail = 'alice@example.com';
console.log('userEmail:', userEmail); // alice@example.com

// ============================================================
// FUNCTION EXPRESSIONS — NOT fully hoisted (they behave like var/let/const)
// ============================================================

// Uncomment to see the error:
// formatName('Bob'); // ❌ TypeError: formatName is not a function
// At this point, var formatName is hoisted with value undefined
// Calling undefined() throws a TypeError

var formatName = function(name) {
  return `Hello, ${name}!`;
};

console.log(formatName('Bob')); // Hello, Bob!

// ============================================================
// THE BUG: var in a loop with closures
// ============================================================

const buggyTimers = [];

for (var taskNumber = 1; taskNumber <= 3; taskNumber++) {
  // We WANT each timer to remember its own taskNumber
  // But var is function-scoped — there's only ONE taskNumber variable
  // By the time these run, the loop has finished and taskNumber === 4
  buggyTimers.push(
    setTimeout(() => console.log('Buggy task:', taskNumber), 100)
  );
}
// Output after 100ms will be:
// Buggy task: 4
// Buggy task: 4
// Buggy task: 4

// ============================================================
// FIX 1: Use let — creates a NEW binding per iteration
// ============================================================

const fixedTimers = [];

for (let taskNumber = 1; taskNumber <= 3; taskNumber++) {
  // let gives each iteration its own separate 'taskNumber' in memory
  // Each closure closes over a different variable — the one for its iteration
  fixedTimers.push(
    setTimeout(() => console.log('Fixed task (let):', taskNumber), 200)
  );
}
// Output after 200ms:
// Fixed task (let): 1
// Fixed task (let): 2
// Fixed task (let): 3

// ============================================================
// FIX 2: IIFE (useful if you must support pre-ES6 environments)
// ============================================================

for (var legacyTask = 1; legacyTask <= 3; legacyTask++) {
  // The IIFE creates a new function scope on each iteration
  // We pass legacyTask as an argument, which captures its current value
  (function(capturedTask) {
    setTimeout(
      () => console.log('Fixed task (IIFE):', capturedTask),
      300
    );
  })(legacyTask);
}
// Output after 300ms:
// Fixed task (IIFE): 1
// Fixed task (IIFE): 2
// Fixed task (IIFE): 3

// ============================================================
// REAL-WORLD PATTERN: adding click handlers in a loop
// ============================================================

const menuItems = ['Home', 'Articles', 'Contact'];

menuItems.forEach((itemName, index) => {
  // forEach gives each iteration its own scope automatically
  // This is another clean way to avoid the loop closure trap
  console.log(`Registering handler for: ${itemName} at index ${index}`);
  // In a browser: button.addEventListener('click', () => navigate(itemName));
  // 'itemName' is correctly captured per iteration
});

console.log('Loop registration complete.');