JavaScript Let

Let vs Var

Variables declared with let have block scope, meaning they only exist within the block (curly braces {}) where they're defined. This is more intuitive and predictable than var's function scope. Block scope means a variable declared in an if statement, for loop, or any block only exists within that block, preventing accidental variable pollution and naming conflicts.

Variables declared with var have function scope (or global scope if declared outside a function), not block scope. This means var variables can "leak" out of blocks like if statements or loops, which is often unexpected and can cause bugs. This unintuitive behavior is one of the main reasons let was introduced as a better alternative.

Variables declared with let cannot be redeclared in the same scope. If you try to declare "let x" twice in the same scope, JavaScript will throw a syntax error. This catches accidental redeclarations and naming conflicts at development time. With var, you could accidentally redeclare the same variable, overwriting its value without warning—a common source of bugs.

Variables declared with let are in a "temporal dead zone" from the start of the block until the declaration is reached. This means you must declare let variables before using them, unlike var which is hoisted to the top of its scope. While both are technically hoisted, let variables aren't initialized until their declaration line, so accessing them early throws a ReferenceError.

The let keyword is the preferred way to declare variables in modern JavaScript when you need to reassign the variable's value. Use const for values that won't be reassigned and let for values that will. Together, let and const have largely replaced var in modern code. Most style guides and linters recommend avoiding var entirely in new code.

// Block scope with let
{
  let x = 2;
}
// x cannot be used here

// Function scope with var
{
  var y = 2;
}
// y CAN be used here

// Cannot redeclare with let
let z = 1;
// let z = 2; // Error!

// Can redeclare with var
var a = 1;
var a = 2; // OK (but not recommended)

Block Scope

Block scope means variables declared inside a block (between curly braces {}) cannot be accessed from outside that block. Blocks are created by if statements, for loops, while loops, functions, or even standalone curly braces. Variables declared with let or const inside a block are confined to that block and its nested blocks—they don't exist outside.

Block scope applies to both let and const, giving them identical scoping behavior. This predictable scoping makes code easier to understand and reason about. You know exactly where a variable exists and where it doesn't. When you see a let or const declaration inside a block, you immediately know that variable is local to that block.

In contrast, var does not have block scope—it only has function scope. A var declared inside a block is accessible outside that block (unless it's inside a function). This can lead to unexpected behavior where variables persist longer than you'd expect, potentially causing naming conflicts or allowing unintended access to variables that should be local.

Block scope prevents variable pollution and naming conflicts in larger programs. You can use the same variable name in different blocks without interference. This is especially valuable in team development or when working with libraries—you don't have to worry about accidentally overwriting a variable from another part of the code.

Block scope is especially useful in loops and conditionals. In a for loop with "for (let i = 0...", the variable i only exists within that loop. Each iteration can even have its own copy of the variable when creating closures, which solves classic JavaScript closure problems. This is one of the most practical advantages of let over var.

// let has block scope
if (true) {
  let greeting = "Hello";
  console.log(greeting); // Works
}
// console.log(greeting); // Error!

// var does not have block scope
if (true) {
  var message = "Hi";
  console.log(message); // Works
}
console.log(message); // Also works!

// Loop example
for (let i = 0; i < 3; i++) {
  // i is only available here
}
// console.log(i); // Error!