JS Puzzles · Const

Variable Shadowing

Variable shadowing happens when a nested scope declares a name already used outside it. With const, the inner binding takes precedence throughout the block and is inaccessible before initialization.

How it works

A block-scoped const declaration can reuse an identifier from an outer scope. Inside the block, name lookup selects the inner binding throughout that block, including before its declaration is executed; accessing it then throws a ReferenceError because it is in the temporal dead zone.

Syntax

const name = value;

Key points

A const declared in braces is limited to that block.
Identifier lookup starts with the innermost lexical environment and falls back outward.
The same scope behavior described for let applies to const.

Common mistakes

A shadowing const affects the whole inner scope from its beginning, not only the lines after the declaration.
Reading the outer variable by the same name before the inner const declaration does not work; it raises a ReferenceError.

Example: A shadowed const enters the temporal dead zone

const x = 1;

{
  try {
    console.log(x);
  } catch (error) {
    console.log(error.name);
  }
  const x = 2;
  console.log(x);
}

The inner declaration shadows the outer name, but the name is inaccessible until its declaration is reached.

When to use it

Limit a temporary value to a block

Use a short-lived name inside a nested block without changing the outer binding.

Create a local override

Keep an outer configuration or state value unchanged while computing a local replacement.

Isolate nested logic

Avoid accidental mutation of an outer identifier by giving a nested operation its own binding.

Interview questions

QWhat is variable shadowing?

Shadowing occurs when an inner scope declares a variable with the same name as one in an outer scope. JavaScript resolves the inner binding first, so references in that inner scope use the inner variable.

Follow-up: What happens before the inner const declaration? The binding already occupies the block, but remains uninitialized, so access throws a ReferenceError.

QWhy can shadowing cause a ReferenceError before declaration?

A const declaration is block-scoped, and its name is available only after execution reaches the declaration. Before that point it is in the temporal dead zone.

Follow-up: Why is the outer binding not used during that interval? The inner declaration reserves the name for the entire block, so lookup finds the uninitialized inner binding first.

QHow does JavaScript choose between same-named variables?

JavaScript searches the innermost lexical environment first, then successively searches outer environments. Therefore, a same-named inner declaration hides the outer declaration within its block.

Follow-up: Can the outer value still be accessed through the same identifier inside the block? Not while the inner binding is in scope; use a different name or restructure the scopes.

const
let
block scope
Lexical Environment
temporal dead zone
closure

Source: Variable scope, closure - The Modern JavaScript Tutorial. Checked 2026-10-15.