What is JavaScript let: A Practical Guide

Learn what JavaScript let is, how it differs from var and const, and why block scope matters. Practical patterns and common pitfalls explained for modern frontend development.

JavaScripting Team

February 22, 2026·5 min read

JavaScript Tutorials Variables Learn JavaScript Syntax

JavaScript let

JavaScript let is a keyword that declares block-scoped local variables in JavaScript. It is part of ES6 and contrasts with var by restricting scope to the nearest enclosing block.

What let does in JavaScript

Let is a keyword used to declare block scoped variables in JavaScript. It creates a local binding within the nearest enclosing block, such as inside an if statement, a loop, or a function block. This scope behavior contrasts with var, which is function scoped. Use let to minimize leaks and accidental overrides.

if (true) {
  let x = 10;
  console.log(x); // 10
}
console.log(typeof x); // undefined or ReferenceError in strict mode

In practice, let enables developers to write safer, more maintainable code by preventing values from bleeding into outer scopes. It also supports reassignment, so you can update the variable's value within its block.

Block scope explained

Block scope describes where variables declared with let are accessible. A block is any code enclosed by curly braces { ... }. Within a block, a let declaration creates a new binding that does not exist outside. This is different from var, which attaches the binding to the containing function scope. This difference affects loops, conditionals, and nested blocks.

Example:

{
  let a = 1;
  {
    let a = 2;
    console.log(a); // 2
  }
  console.log(a); // 1
}
console.log(typeof a); // undefined

Key implications: you can reuse variable names in inner blocks without collision, and outer variables are protected from accidental overwrites.

Temporal Dead Zone and hoisting

Let is hoisted in the sense that the declaration is moved to the top of the scope, but the variable remains uninitialized until its evaluation line runs. This creates the Temporal Dead Zone (TDZ). Accessing the variable before its declaration results in a ReferenceError, which helps catch errors early.

console.log(b); // ReferenceError
let b = 3;

TDZ applies to every let declaration, including inside loops and blocks. This behavior is a fundamental reason to avoid using variables before initialization.

Let versus var and const

JavaScript has three main ways to declare variables with different scoping and mutability:

let: block-scoped and reassignable
const: block-scoped and read-only binding (the value cannot be reassigned, but objects can be mutated)
var: function-scoped and hoisted with an initial value of undefined

Best practice: prefer let and const in modern code. Reserve var for legacy contexts or specific patterns that require function scope.

Common patterns and pitfalls

Common mistakes with let include overshadowing variables in inner blocks, and encountering TDZ when trying to access before initialization. Avoid reusing the same identifier in a nested block, which can lead to confusion. Always choose descriptive names to minimize confusion, and declare variables close to their first use.

Do not attempt to redeclare a let variable in the same scope
Use const by default for values that should not change
Use let for values that will be reassigned within the block

Let in loops and functions

Declaring loop counters with let creates a new binding for each iteration, which is essential for closures inside loops. Using var in loops can lead to a single binding shared across iterations, causing bugs. Inside functions, let behaves like standard block scoped variables; variables declared in a function are not accessible outside.

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

In contrast with var:

for (var j = 0; j < 3; j++) {
  setTimeout(() => console.log(j), 0);
}
// logs 3, 3, 3

Let in modules and asynchronous code

Let works the same inside modules as in scripts, maintaining block scope. When you write asynchronous code, let can be particularly helpful in preserving the intended value of a variable inside callbacks and promise handlers. Tools like async await keep code readable while letting you rely on lexical scoping for predictable behavior.

Debugging, tooling, and browser support

Most modern browsers support let since ES6. If you need to support older environments, use a transpiler like Babel or TypeScript to convert let to equivalent code. In development, enable strict mode to catch TDZ violations and other scope mistakes. Linting rules can help enforce best practices around variable declarations.

Practical guidelines for real world projects

Use let for variables that will be reassigned within a block, and use const to lock down values that should not change. Always limit the scope of variables to the smallest possible block. JavaScripting Analysis, 2026 indicates that teams adopting block-scoped declarations report fewer scope-related bugs and easier maintenance in frontend code. In most projects, the default is to declare with let or const, reserving var only for legacy portions of code.

Questions & Answers

What is the difference between let and var in JavaScript?

Let declares block-scoped variables and is subject to the temporal dead zone, while var declares function-scoped variables that are hoisted with an initial value of undefined. In practice, let makes code safer and more predictable.

Can I redeclare a let variable in the same scope?

No. A let declaration cannot be redeclared in the same scope. You can declare the same identifier in inner or outer scopes, but not reintroduce it in the same block.

What is the Temporal Dead Zone in simple terms?

The temporal dead zone is the period inside a block where a let variable exists but is not yet initialized. Accessing it before initialization results in a ReferenceError.

Does let hoist in JavaScript?

Let is hoisted like other declarations, but it remains in the TDZ until its declaration runs, so accessing it early causes an error.

Can I use let inside for loops to create per iteration bindings?

Yes. Declaring the loop counter with let creates a new binding for each iteration, which helps avoid closure bugs.

Is let supported in older browsers?

Let is supported in modern browsers. For older environments, use a transpiler like Babel to convert let to compatible code.