let Declaration

The let statement declares a block-scoped local variable, optionally initializing it to a value. It binds the variable to the lexical environment of the nearest enclosing block or statement, rather than the execution context of the enclosing function or global scope. Lexical declarations cannot be scoped to an expression. Consequently, using let in a single-statement context without a block (e.g., if (true) let x = 1;) results in a SyntaxError.

Syntax

let name1;
let name1 = value1;
let name1 = value1, name2 = value2;

Scope Mechanics

Variables declared with let are scoped strictly to the block ({ ... }) in which they are defined, including any nested sub-blocks. This contrasts with var, which is scoped to the nearest enclosing function or global execution context.

{
  let blockScopedVar = 10;
}
// console.log(blockScopedVar); // ReferenceError: blockScopedVar is not defined

Loop Iteration Bindings

When declared within the head of a for, for...in, or for...of loop, let creates a new lexical environment for each iteration of the loop. A fresh binding is instantiated per loop execution, rather than a single binding for the entire loop structure. This distinct per-iteration binding ensures that closures created within the loop body capture the specific value of that exact iteration.

for (let i = 0; i < 3; i++) {
  // A new lexical binding for 'i' is created for iterations 0, 1, and 2
  setTimeout(() => console.log(i), 10);
}
// Output: 0, 1, 2

Hoisting and the Temporal Dead Zone (TDZ)

During the compilation phase, let declarations are hoisted to the top of their enclosing block. However, unlike var, they are not initialized with undefined. Instead, the variable enters a state known as the Temporal Dead Zone (TDZ). The TDZ lasts from the beginning of the block’s execution until the JavaScript engine evaluates the let declaration. Accessing the identifier within the TDZ throws a ReferenceError.

{
  // TDZ starts for 'x'
  // console.log(x); // ReferenceError: Cannot access 'x' before initialization
  let x = 5;      // TDZ ends for 'x', initialization occurs
}

Re-declaration Rules

let prohibits re-declaring an identifier within the same lexical scope. Attempting to do so results in a SyntaxError during the parsing phase, preventing code execution.

let y = 1;
// let y = 2; // SyntaxError: Identifier 'y' has already been declared

However, identifier shadowing is permitted if the declaration occurs within a nested block, as the nested block creates a distinct lexical environment.

let z = 1;
{
  let z = 2; // Valid: shadows the outer 'z' within this specific block
}

Global Object Binding

When declared at the top level of a script, let does not create a property on the global object. The variable is instead stored in the declarative environment record of the global scope, meaning it cannot be accessed as a property of globalThis.

let topLevelVar = "data";
console.log(globalThis.topLevelVar); // undefined

Master JavaScript with Deep Grasping Methodology!

Learn More