Scope & Hoisting

What is Scope?

Scope determines where a variable is accessible in your code. Variables declared in one scope are not visible in others unless they flow through the scope chain.

There are three types of scope in modern JavaScript:

1. Global scope — accessible everywhere
2. Function scope — accessible within the function
3. Block scope — accessible within the {} block (let and const)

Global Scope

Variables declared outside any function or block are global:

const globalName = "Alice"; // global

function greet() {
  console.log(globalName); // accessible inside function
}

greet(); // "Alice"
console.log(globalName); // "Alice"

Function Scope

Variables declared inside a function are only accessible within that function:

function calculateTax(income) {
  const taxRate = 0.2; // function-scoped
  const tax = income * taxRate;
  return tax;
}

console.log(calculateTax(50000)); // 10000
// console.log(taxRate); // ReferenceError: taxRate is not defined

Block Scope (let and const)

let and const are block-scoped — limited to the {} they're declared in:

if (true) {
  let blockVar = "I'm block-scoped";
  const blockConst = "Me too";
  console.log(blockVar);  // ✓ accessible here
}

// console.log(blockVar); // ✗ ReferenceError

// Classic block scope example with loops
for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100);
}
// Prints: 0, 1, 2 — each iteration has its own `i`

// Compare with var (no block scope):
for (var j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 100);
}
// Prints: 3, 3, 3 — all share the same `j`

The Scope Chain

When a variable is referenced, JavaScript looks for it in the current scope, then walks up through parent scopes until it finds it (or throws a ReferenceError):

const globalVar = "I'm global";

function outer() {
  const outerVar = "I'm outer";

  function inner() {
    const innerVar = "I'm inner";

    // Can access all three:
    console.log(innerVar);  // ✓
    console.log(outerVar);  // ✓ (outer scope)
    console.log(globalVar); // ✓ (global scope)
  }

  inner();
  // console.log(innerVar); // ✗ Not accessible here
}

outer();

This is called lexical scoping — the scope is determined by where the code is written, not where it's called from.

Hoisting

Hoisting is JavaScript's default behavior of moving declarations to the top of their scope during the compilation phase (before execution). Only declarations are hoisted, not initializations.

Function Declaration Hoisting

Function declarations are fully hoisted — you can call them before they appear in code:

console.log(add(2, 3)); // 5 — works!

function add(a, b) {
  return a + b;
}

Internally, JavaScript processes this as:

// What JS actually does:
function add(a, b) { return a + b; } // hoisted to top
console.log(add(2, 3)); // 5

var Hoisting

var declarations are hoisted, but initialized to undefined:

console.log(x); // undefined (not an error!)
var x = 5;
console.log(x); // 5

// What JS does:
// var x; // declaration hoisted, value is undefined
// console.log(x); // undefined
// x = 5;          // assignment stays in place
// console.log(x); // 5

let and const — Temporal Dead Zone

let and const are hoisted but NOT initialized. Accessing them before declaration throws a ReferenceError:

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

The period between the start of the block and the let/const declaration is called the Temporal Dead Zone (TDZ).

{
  // TDZ starts here for myVar
  console.log(myVar); // ReferenceError!
  let myVar = "hello"; // TDZ ends here
}

Lexical Scope in Practice

Closures (covered in the next lesson) rely on lexical scope. Here's a preview:

function makeAdder(x) {
  // x is in scope here
  return function(y) {
    return x + y; // x is still accessible!
  };
}

const add5 = makeAdder(5);
const add10 = makeAdder(10);

console.log(add5(3));  // 8
console.log(add10(3)); // 13

add5 and add10 each retain access to their own x even after makeAdder has returned. This is a closure — the inner function "closes over" the outer scope.

Key Takeaways

• Global scope — accessible everywhere; use sparingly
• Function scope — variables live inside their function
• Block scope — let/const are limited to their {} block
• Scope chain — JavaScript walks up scopes to resolve variables (lexical scoping)
• Hoisting — var declarations and function declarations move to the top of their scope
• let/const have the Temporal Dead Zone — don't access them before declaration