ReviseAlgo Logo

ES6+ Modern JavaScript

let & const (Recap & Edge Cases)

Master modern variables scoping and declarations in JavaScript. Analyze let and const, Temporal Dead Zone mechanics, block scopes, and global object binding.

Last Updated: July 15, 2026 • 10 min read

1. Introduction

ES6 introduced let and const to replace the older, function-scoped var declaration. While these keywords are now standard, they introduce specific behaviors like block scoping, variable mutation rules, and temporal dead zone (TDZ) mechanisms.

2. Why It Matters

Failing to understand variable scopes and mutations can cause bugs, such as objects declared with const being mutated unexpectedly or reference errors triggered by the Temporal Dead Zone.

3. Real-World Analogy

Think of Office Desk Assignments:

  • var (Global Whiteboard): A whiteboard in the hallway. Anyone can write on it, and the content is visible to everyone in the building. It has no boundaries.
  • let (Individual Desk Organizer): A desk organizer inside a private office (block scope). Only people inside the office can use it. The folder is placed on the desk, but you cannot open it until the manager arrives (TDZ boundary).
  • const (Framed Award): A plaque bolted to the wall. You cannot swap it for a different award (cannot reassign the variable). However, you can polish the frame or replace the glass cover (you can mutate properties of the object).

4. Scoping & Mutations

Let's review the scoping rules and mutation behaviors:

1. Block Scoping:

Variables declared using let or const are scoped to the nearest curly brace block (e.g. inside if statements, loops, or functions), preventing variables from leaking.

2. const Immutability:

Declaring a variable with const prevents you from reassigning the variable identifier, but does not make the stored value immutable. Properties of objects and arrays declared with const can still be modified.

5. Temporal Dead Zone (TDZ)

Variables declared with let and const are hoisted to the top of their block, but remain uninitialized. The region from the start of the block until the variable declaration line is evaluated is the Temporal Dead Zone (TDZ). Accessing the variable inside this zone throws a ReferenceError.

6. Comparison Summary

Feature var let const
Scope Function Scope Block Scope Block Scope
Reassignment Allowed Allowed Blocked
TDZ Zone? No (returns undefined) Yes (throws ReferenceError) Yes (throws ReferenceError)

7. Practical Example

This script demonstrates freezing an object to prevent mutations to its properties:

8. Common Mistakes

  • Assuming const creates completely immutable objects: const only blocks reassignment. Object properties can still be mutated. Use Object.freeze() if you need to prevent mutations.

9. Quick Quiz

Q1: What happens if you try to modify a property of an array declared with const?

A) It throws a TypeError

B) It succeeds, mutating the array elements

Answer: B — Arrays declared with const can still be mutated; only reassigning the variable identifier is blocked.

10. Scenario-Based Challenge

The Global Object Binding Guard:

Variables declared with var at the top level attach to the global object (window or globalThis). Contrast this with let and const variables and design a check to verify if top-level declarations bind to the window namespace.

11. Debugging Exercise

Explain why this loop logs 3 three times, and how to fix it using ES6 scoping:

for (var i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // logs 3, 3, 3! Why?
}
View Solution

Diagnosis: The variable i is declared using var, which makes it function-scoped instead of block-scoped. All callbacks share the same variable reference. By the time the timeout callbacks run, the loop has completed and i has resolved to 3.

Fix: Declare the loop index variable using let to create a separate block-scoped binding for each iteration:

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 100); // logs 0, 1, 2
}

12. Interview Questions

🟢 Q1: Explain the Temporal Dead Zone (TDZ) and why it exists.

Answer: The Temporal Dead Zone (TDZ) is the region in a block from the start of the block until the variable declaration line is evaluated. Variables declared with let and const are hoisted to the top of their block but remain uninitialized. Accessing them inside the TDZ throws a ReferenceError. The TDZ exists to catch errors caused by accessing variables before they are declared, promoting cleaner coding habits.

13. Production Considerations

  • • Default to const: In production development, default to declaring variables with const. Use let only if you expect the variable value to be reassigned. Avoid using var entirely.