JavaScript let、const 与 var 的区别：作用域、提升与用法

三个关键字，一个用途

JavaScript 有三种声明变量的方式：var、let 和 const。它们都是把一个名字绑定到一个值上，但在作用域、重新赋值的规则，以及声明语句运行之前的行为上各不相同。现代代码大多数时候用 const，值需要改变时用 let，而 var 很少用，甚至完全不用。

简单来说：

const pi = 3.14159;      // can't be reassigned
let count = 0;           // can be reassigned
var legacy = "old school"; // works, but avoid

count = count + 1;
console.log(pi, count, legacy);

本页剩下的内容，就是解释这三行为什么会这样表现。

const：默认选择

const 创建一个不能重新赋值的绑定。一旦写了 const x = 5，之后就不能再写 x = 6，引擎会抛出 TypeError。

const rate = 0.08;
console.log(rate);

// rate = 0.09;   // TypeError: Assignment to constant variable.

规则就这么一条。因为在写得好的程序中，大多数变量都不需要重新赋值，所以 const 适用于绝大多数情况。优先使用 const，能让那些值确实会改变的地方更加醒目。

一个常见的困惑：const 保护的是绑定，而不是值。如果值是对象或数组，它的内容仍然是可变的：

const user = { name: "Ada" };
user.name = "Boris";         // fine - mutating the object
user.role = "admin";         // fine - adding a property
console.log(user);

// user = { name: "Rosa" };  // TypeError - reassigning the binding

const 的意思是“这个名字永远指向这个对象”，而不是“这个对象永远不会改变”。如果你需要冻结对象本身，可以用 Object.freeze(user)；不过在实践中，大多数代码只是依赖一个约定：const 对象不应该被修改。

let：确实需要重新赋值时

let 和 const 在各方面都一样，唯一的区别是它可以重新赋值。把它用于计数器、累加器、循环变量，以及任何值确实会随时间变化的地方。

let attempts = 0;
while (attempts < 3) {
    attempts += 1;
    console.log("attempt", attempts);
}

如果你写了 let，却从来没有对这个变量重新赋值，就把它改成 const。大多数项目中的代码检查工具都会提醒你。

块级作用域

let 和 const 都是块级作用域。块就是 { 和 } 之间的任何内容：if 的主体、for 的主体、函数，甚至是一个单独的 { ... } 代码块。在块内声明的变量在块外并不存在。

if (true) {
    const message = "hello from inside";
    console.log(message);
}

// console.log(message);  // ReferenceError: message is not defined

这正是你想要的。它让变量只在其所属的工作范围内有效，也让意外的命名冲突不可能发生。

var 不会这样做，这也是避免使用它的主要原因。

var：函数作用域与意外

var 的作用域是最近的函数，而不是最近的块。这意味着在 if 或 for 中声明的 var 会泄漏到外层函数中：

function demo() {
    if (true) {
        var leaked = "I escaped";
        let contained = "I did not";
    }
    console.log(leaked);       // "I escaped"
    // console.log(contained); // ReferenceError
}

demo();

这种松散的作用域是一长串经典 JavaScript bug 的根源，最有名的就是循环中每次迭代都共用同一个 var i，结果所有回调看到的都是最终的值。

var 还允许你在同一作用域中重复声明同一个名字而不报错，这会掩盖拼写错误：

var count = 1;
var count = 2;   // silently fine with var
console.log(count);

let total = 1;
// let total = 2;   // SyntaxError: Identifier 'total' has already been declared

现代代码几乎只用 let 和 const。var 出现在遗留代码库、老旧的 Stack Overflow 回答，以及需要在非常老的环境中运行的脚本里。

提升与暂时性死区

三种声明都会被提升，也就是说引擎在运行块中的代码之前就已经知道它们，但在声明语句运行之前，它们的行为各不相同。

var 会被提升并初始化为 undefined。你可以在 var 那一行之前引用它，而不会报错：

console.log(early);   // undefined - no error
var early = "hello";
console.log(early);   // "hello"

let 和 const 会被提升，但不会被初始化。在声明之前访问它们会抛出异常。从进入作用域到运行声明语句之间的这段区域，叫作暂时性死区（TDZ）：

// console.log(planned);   // ReferenceError: Cannot access 'planned' before initialization
let planned = "hello";
console.log(planned);

暂时性死区是一个特性，而不是 bug。它把“声明前使用”从一个悄无声息的 undefined 变成一个明显的错误，能发现很多拼写和顺序上的错误。

for...of 中的 const 循环变量

一个小但常见的情况：for...of 循环在每次迭代时都会创建一个新的绑定，所以即使循环变量在迭代之间“变了”，你也可以用 const 声明它。

const names = ["Ada", "Boris", "Rosa"];

for (const name of names) {
    console.log(name);
}

每次迭代都有自己的 name 绑定，并不存在一个被反复赋值的变量。而经典的 for (let i = 0; i < n; i++) 仍然需要 let，因为 i 是一个会被递增的绑定。

一条实用规则

按以下优先顺序选择声明方式：

• 默认用 const。如果值不会被重新赋值，就明确表达出来。
• 绑定确实需要改变时，用 let。
• 只有在代码库要求时才用 var。

坚持这样做，每个变量的意图都一目了然：能否重新赋值，作用域是这个块还是这个函数。

const MAX_RETRIES = 3;
const users = ["Ada", "Boris", "Rosa"];

let successful = 0;
for (const user of users) {
    // pretend we tried to do something
    successful += 1;
}

console.log(`${successful}/${users.length} succeeded, up to ${MAX_RETRIES} retries`);

MAX_RETRIES 和 users 从不改变，所以用 const。successful 会增长，所以用 let。user 在每次迭代中都是一个新的绑定，所以用 const。从上往下读，不用运行代码，你就能分辨出哪些值会变、哪些不会。

下一步：原始类型

现在你已经会声明变量了，下一个问题是它们能保存哪些类型的值。JavaScript 有一小组原始类型：数字、字符串、布尔值以及其他几种，每种都有自己的特点。这就是下一页的内容。