JavaScript Scope

Scope determines where in your code a variable is accessible. JavaScript has three levels of scope — global, function, and block — and understanding how they nest inside one another is essential for predicting which variable a piece of code will actually see.

Scope also explains many of the practical differences between var and let/const covered earlier: the keyword you choose determines which of these scoping rules applies to the variable you declare.

Why it matters

Scope decides where a variable can be seen. A function that accidentally changes a variable outside itself produces bugs that appear far from their cause. Understanding scope is what lets you keep data private to the code that needs it, and it is the foundation for closures.

Global Scope

A variable declared outside of any function or block lives in the global scope and is accessible from anywhere in the program, including inside every function and block. Overusing global scope is generally discouraged, because it makes it easy for unrelated parts of a program to accidentally interfere with each other's data.

Function Scope

A variable declared with var inside a function is scoped to that entire function, regardless of how many nested blocks (if, for, and so on) it passes through. This is why a var declared inside an if block is still visible after that block ends, as long as you remain inside the same function.

Block Scope

A variable declared with let or const is scoped to the nearest enclosing pair of curly braces — an if block, a for loop body, or even a bare { } block on its own. Once execution leaves that block, the variable no longer exists. This tighter scoping is one of the main reasons let and const replaced var in modern JavaScript: it prevents variables from silently "leaking" beyond the block where they logically belong.

Scope Chain and Shadowing

When code refers to a variable, the engine looks for it in the current scope first, then walks outward through each enclosing scope until it finds it (or reaches the global scope and fails, throwing a ReferenceError). If an inner scope declares a variable with the same name as an outer one, the inner variable "shadows" the outer one for the rest of that inner scope.

Examples

function demoScope() {
  if (true) {
    var functionScoped = "visible in the whole function";
    let blockScoped = "visible only in this block";
    console.log(blockScoped);
  }
  console.log(functionScoped);
  try {
    console.log(blockScoped);
  } catch (error) {
    console.log(error.message);
  }
}

demoScope();

visible only in this block
visible in the whole function
blockScoped is not defined

let message = "outer";

function showMessage() {
  let message = "inner";
  console.log(message); // finds the shadowing inner variable first
}

showMessage();
console.log(message); // outer variable is unaffected

inner
outer

Exercise

Calling show overwrites the outer variable, because the function assigns to it instead of declaring its own. Change the function so that it uses a local variable and the outer one keeps its value.

Expected output: inner then outer

let message = "outer";

function show() {
  message = "inner";
  console.log(message);
}

show();
console.log(message);

let message = "outer";

function show() {
  const message = "inner";
  console.log(message);
}

show();
console.log(message);

Quick quiz

Interview questions