已有var时为何仍需使用ES5引入的JavaScript关键字let？

Great question! Let's break down why let was added to JavaScript (in ES6/ES2015) even though we already had var—it fixes some of the most frustrating, counterintuitive quirks of var that used to trip up developers constantly.

1. Block-Level Scoping (Finally!) #

var uses function-level scoping, meaning variables declared with var are only confined to the nearest function (or global scope if declared outside a function). This causes variables to "leak" out of blocks like if statements or for loops, which is almost never what you want.

let, on the other hand, uses block-level scoping—variables are confined to the nearest pair of curly braces {} (like an if block, for loop, or even a standalone block). Here's a concrete example:

// With var: variable leaks outside the if block
if (true) {
  var message = "Hi there!";
}
console.log(message); // Outputs "Hi there!" (unexpected leak)

// With let: variable stays inside the block
if (true) {
  let message = "Hi there!";
}
console.log(message); // Throws an error: message is not defined (expected behavior)

2. No More Surprising Variable Hoisting #

var has a weird behavior called variable hoisting: the declaration of the variable is moved to the top of its scope, but the assignment stays where it is. This means you can access a var variable before it's declared, and you'll get undefined instead of an error—this leads to confusing bugs.

let eliminates this with the Temporal Dead Zone (TDZ): you can't access a let variable at all before it's declared. If you try, JavaScript throws an immediate error, which helps you catch issues early:

// With var: silent confusion
console.log(age); // Outputs undefined (no error, but confusing)
var age = 25;

// With let: clear error
console.log(age); // Throws: Cannot access 'age' before initialization
let age = 25;

3. Prevents Accidental Re-Declarations #

var lets you declare the same variable multiple times in the same scope without any warning. This makes it easy to accidentally overwrite a variable's value without realizing it, leading to hard-to-debug issues.

let blocks this entirely—it throws an error if you try to re-declare a variable in the same scope:

// With var: silent overwrite
var score = 10;
var score = 20; // No error, score is now 20 (easy to miss)

// With let: immediate error
let score = 10;
let score = 20; // Throws: Identifier 'score' has already been declared (catches the issue)

4. Fixes Loop Variable Binding #

One of the most infamous var bugs happens in loops, especially with asynchronous code like setTimeout. Because var creates a single variable shared across all iterations, all callbacks end up using the final value of the loop variable.

let fixes this by creating a new binding for the variable in each loop iteration—each callback gets the value of the variable from that specific iteration:

// With var: all callbacks use the final value of i
for (var i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // Outputs 3, 3, 3 (not what you'd expect!)
  }, 100);
}

// With let: each callback gets the iteration-specific i
for (let i = 0; i < 3; i++) {
  setTimeout(() => {
    console.log(i); // Outputs 0, 1, 2 (correct behavior)
  }, 100);
}

Wrapping Up #

let was introduced to make variable scoping in JavaScript more intuitive, reduce unexpected bugs, and align the language with how most other programming languages handle variables. Today, unless you're supporting very old browsers, there's almost no reason to use var—let (and const for variables that shouldn't change) are the standard.

内容的提问来源于stack exchange，提问作者pgbrim