JS Let

Imagine a meeting room that's only booked and available during a specific meeting, once that meeting ends, the room and anything left inside it are gone, unavailable to any other meeting outside that time slot. The let keyword creates variables that work the same way, they exist only within the block of code, the { } braces, where they were declared, whether that's an if statement, a loop, or a function. This block scoping makes let variables far more predictable than the older var, which is why it has become the standard choice for values that change, across projects big and small, including cookiescursor.com.

In this page:

Block Scope
No Redeclaration
The Temporal Dead Zone
let Inside Loops
When to Use let vs var

Block Scope

A let variable only exists inside the nearest set of curly braces { } that contains it, whether that's an if statement, a loop, or any other code block, and is completely inaccessible outside that block.

Note: Block scoping means you can safely reuse simple names like i or item inside different blocks without them interfering with each other.

Warning: A let variable declared inside an if block cannot be used after that block ends, even later in the same function.

Example: Block Scope

javascript

if (true) {
  let message = "Inside the block";
  console.log(message);
}
// console.log(message); // ReferenceError: message is not defined

No Redeclaration

JavaScript does not allow declaring the same let variable name twice within the same scope, this restriction helps catch accidental naming conflicts that could otherwise cause confusing bugs.

Note: If you get a redeclaration error with let, check whether you actually meant to just reassign the existing variable instead.

Warning: Attempting to redeclare a let variable in the same scope throws a SyntaxError immediately, before the script even runs.

Example: No Redeclaration

javascript

let name = "Sam";
// let name = "Alex"; // SyntaxError: already declared
name = "Alex"; // reassignment is fine
console.log(name);

The Temporal Dead Zone

The temporal dead zone is the period between the start of a block and the actual line where a let variable is declared, during which the variable technically exists but cannot be accessed, and doing so throws an error.

Note: The safest way to avoid temporal dead zone errors is simply to always declare variables near the top of the block where they're used.

Warning: Unlike var, which quietly returns undefined if accessed early, let throws a clear error, which is actually a helpful safety net.

Example: The Temporal Dead Zone

javascript

// console.log(value); // ReferenceError: Cannot access before initialization
let value = 10;
console.log(value);

let Inside Loops

Because let is block-scoped, each iteration of a loop gets its own fresh copy of a let variable, which matters a lot when working with functions created inside a loop, like event handlers or timers.

Note: When you need a loop counter to behave predictably inside callbacks like setTimeout, let is essential, var can produce surprising shared values instead.

Warning: Using var instead of let for a loop counter used inside a delayed function often causes every callback to see the same final value.

Example: let Inside Loops

javascript

for (let i = 0; i < 3; i++) {
  setTimeout(() => console.log(i), 0);
}
// Logs 0, 1, 2 - each iteration gets its own i

When to Use let vs var

In modern JavaScript, let should be your default for any value that changes, its block scoping and stricter rules prevent entire categories of bugs that var allows, making code more predictable across a whole team.

Note: If you're maintaining older code that uses var, there's usually no harm in gradually replacing it with let or const as you touch those sections.

Warning: Mixing var and let for similar purposes in the same file can create inconsistent scoping behavior that's confusing to reason about.

Example: When to Use let vs var

javascript

let total = 0;
for (let i = 1; i <= 3; i++) {
  total += i;
}
console.log(total);

Common Mistakes

Trying to access a let variable outside the block where it was declared, which throws a ReferenceError.
Attempting to declare the same let variable twice in the same scope, which is not allowed and causes an error.
Accessing a let variable before its declaration line runs, falling into the temporal dead zone and triggering an error.

Chapter Summary

let creates block-scoped variables, only accessible within the { } block where they were declared.
Unlike var, let does not allow redeclaring the same variable name in the same scope.
let is the modern default for any variable whose value is expected to change over the life of the script.

Browser Support

let has been supported in all major browsers since 2015 and is considered a safe, standard part of modern JavaScript today.

🔒

Chapter Quiz — Complete all 12 topics to unlock

0/12 topics done

Complete these topics first:

← Previous Lesson JS Variables Next Lesson → JS Const

JS Let

Block Scope

No Redeclaration

The Temporal Dead Zone

let Inside Loops

When to Use let vs var

Chapter Quiz — Complete all 12 topics to unlock

Login to run this code