JavaScript Scope

By the end of this lesson, you will be able to explain where JavaScript variables are visible, how long they live, and why let and const are usually safer than var.

What it is

Scope is the region of code where a variable name can be used. JavaScript has global scope, function scope, and block scope. A variable declared with let or const inside {} is visible only inside that block. A variable declared with var is visible throughout the enclosing function, even if it is declared inside a block. Lifetime is how long the variable exists; block-scoped variables are created when execution enters the block and become unavailable after the block finishes. Related terms include lexical scope, temporal dead zone, closure, and hoisting.

Why it matters

• Prevents accidental variable collisions between unrelated parts of a program.
• Makes code easier to reason about because variables are visible only where needed.
• Reduces bugs caused by var leaking out of loops or blocks.
• Supports encapsulation by keeping helper variables private inside functions or blocks.
• Helps you understand closures, which capture variables from their surrounding scope.

Syntax or steps

Declare variables close to where they are used. Use const when the binding will not be reassigned, let when it will change, and avoid var in modern code.

function example() {
  if (true) {
    let blockScoped = "visible only inside if";
    var functionScoped = "visible inside whole function";
  }

  console.log(functionScoped); // works
  console.log(blockScoped);    // ReferenceError
}

Steps: choose the smallest useful scope, declare with let or const, use the variable inside that scope, and do not rely on it outside.

Example

function makeCounter() {
  let count = 0;

  return function increment() {
    count += 1;
    return count;
  };
}

const counter = makeCounter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(count);     // ReferenceError: count is not defined

Part-by-part: makeCounter creates a local variable named count. The returned function keeps access to count through a closure. Outside makeCounter, count is not visible, so it cannot be reset accidentally. Each call to makeCounter creates a new count.

Common mistakes

• Using var inside a block and expecting it to disappear after the block. Fix: use let or const.
• Declaring a variable after using it in the same block. Fix: move the declaration above the first use; let and const are in the temporal dead zone until initialized.
• Forgetting that const prevents reassignment, not mutation. Fix: use const for object bindings, but understand object properties can still change.
• Creating accidental global variables by omitting let, const, or var. Fix: enable strict mode and always declare variables.

When to use it

Use block scope with let and const for most variables. Use function scope with var only when maintaining old code that depends on hoisting or function-wide visibility.

Practice

Guided exercise: rewrite this code so the loop counter i is not visible after the loop, while total remains available to return.

function sum() {
  var total = 0;
  for (var i = 0; i < 3; i++) {
    total += i;
  }
  return total;
}

Expected solution: use let total = 0; and let i = 0;. The function still returns 3, but i is not visible after the loop.

Challenge: predict the output.

if (true) {
  let x = 1;
}
console.log(x);

Hint: x is block-scoped, so the console line throws a ReferenceError.

Quick check

Question: If a variable is declared with let inside an if block, can it be used after the block ends?

Answer: No. It is visible only inside that block, unless it is declared in an outer scope.

Summary

Scope controls where a variable name is visible, while lifetime controls how long it exists. Modern JavaScript uses block scope with let and const to keep variables local and reduce accidental sharing.