JS Let

JavaScript let: Block Scope & Temporal Dead Zone

Introduced in ES6, the let statement declares a re-assignable, block-scoped local variable. Unlike var, let variables cannot be re-declared in the same scope and exist in a Temporal Dead Zone (TDZ) from the start of the block until execution reaches the initialization line.

Temporal Dead Zone (TDZ) Visualized

flowchart TD
    Start["Block Entry: { "] --> TDZStart["TDZ Begins (Variable is uninitialized)"]
    TDZStart --> AccessAttempt{"Attempt Access Before Line?"}
    AccessAttempt -- "Yes" --> Err["ReferenceError: Cannot access before initialization"]
    AccessAttempt -- "No" --> Init["let x = 10; (TDZ Ends)"]
    Init --> Safe["Safe Usage of x"]

Key Behaviors of let

1. Block Scoping: Variables are accessible only within the enclosing {} block (e.g., if, for, while, or standalone block).
2. No Re-declaration: Declaring the same variable name with let in the same scope throws a SyntaxError.
3. Loop Isolation: In for (let i = 0; ...) loops, a new binding i is created for every loop iteration.

Practical Code Example

// Demonstrating let scoping, TDZ, and loop binding

// 1. Temporal Dead Zone Demonstration
function demonstrateTDZ() {
  // console.log(message); // Throws ReferenceError: Cannot access 'message' before initialization
  
  let message = "TDZ is now over!";
  console.log(message); // Safe usage
}
demonstrateTDZ();

// 2. Loop Scope Isolation (let vs var in closures)
console.log("--- Loop with let ---");
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(`let loop iteration: ${i}`); // Prints 0, 1, 2 correctly
  }, 100);
}

// 3. Block Shadowing
let status = "Global";
{
  let status = "Local Block"; // Shadows outer status variable inside this block
  console.log(`Inner Block Status: ${status}`); // Local Block
}
console.log(`Outer Status: ${status}`); // Global

Best Practices & Gotchas

• Never Access let Before Declaration: Always place let declarations at the top of their enclosing block scope to prevent TDZ ReferenceError crashes.
• Leverage Block Scoping for Temporary Variables: Enclose temporary variables inside { ... } blocks or loops so memory can be garbage-collected immediately when the block finishes.
• Do Not Shadow Outer Variables Unnecessarily: Re-using variable names in inner blocks can confuse code readers.

Self-Check Challenge

Explain why for (let i = 0; i < 3; i++) inside asynchronous callbacks correctly logs 0, 1, 2, whereas for (var i = 0; i < 3; i++) logs 3, 3, 3.