JS进阶干货：letvsvar，这样用才对！

**JS进阶必看：let vs var，这么用才正确！** 在JavaScript开发中，`let`和`var`都是声明变量的关键，但你真的了解它们的区别吗？本文深入剖析`let`和`var`在作用域、变量提升和重复声明上的差异。`let`拥有块级作用域，更符合现代编程习惯，能有效避免变量提升带来的问题，推荐优先使用。而`var`是函数作用域，常用于旧项目或特定场景。通过实际案例，让你彻底搞懂`let`和`var`的正确用法，写出更安全、更清晰的JavaScript代码。掌握这些细节，让你的JS进阶之路更进一步！

在 JavaScript 中，let 和 var 的主要区别在于作用域、变量提升和重复声明。1. let 是块级作用域，而 var 是函数作用域；例如，在 if 块中用 let 声明的变量无法在外部访问，var 则可以。2. var 存在变量提升，即变量可在声明前访问但值为 undefined，而 let 不会提升，提前访问会报错。3. var 允许重复声明变量，而 let 在同一作用域下不可重复声明。4. 推荐优先使用 let，因其更安全且符合现代编程习惯，var 一般用于旧项目或需要函数作用域的场景，如 for 循环中使用 let 可避免闭包问题。

在 JavaScript 中，let 和 var 都是用来声明变量的关键字，但它们的行为和作用域有明显区别。简单来说：var 是函数作用域，而 let 是块级作用域，并且不会被提升到作用域顶部。

下面从几个实际开发中会遇到的场景来具体说明它们的区别和用法。

1. 作用域不同：这是最核心的区别

• var 声明的变量是函数作用域，也就是说，在函数内部定义的 var 变量在整个函数内都有效。
• let 声明的变量是块级作用域，也就是只在最近的一对 {} 内部有效。

举个例子：

if (true) {
  var a = 10;
  let b = 20;
}

console.log(a); // 输出 10
console.log(b); // 报错：ReferenceError: b is not defined

在这个例子里，a 是用 var 声明的，它不受 if 块的限制；而 b 是用 let 声明的，只能在 if 块里访问。

2. 变量提升（Hoisting）行为不同

• var 声明的变量会被“提升”到作用域顶部，赋值仍然保留在原地。
• let 声明的变量不会被提升，访问未声明前的变量会报错。

看个例子你就明白了：

console.log(x); // 输出 undefined
var x = 5;

console.log(y); // 报错：ReferenceError
let y = 10;

这里 x 被提升了，所以输出的是 undefined；而 y 是用 let 声明的，访问时还没声明，直接报错。

这个区别在写代码时特别容易踩坑，尤其如果你习惯先使用变量再声明的话。

3. 是否可以重复声明

• 在同一个作用域下，var 允许重复声明变量。
• let 不允许重复声明，否则会报错。

例如：

var name = "Tom";
var name = "Jerry"; // 合法

let age = 20;
let age = 30; // 报错：Identifier 'age' has already been declared

这在多人协作或大项目中能减少命名冲突的问题，也是推荐使用 let 的原因之一。

4. 使用建议：什么时候用 let，什么时候用 var？

虽然 let 出现得晚一些，但它更符合现代 JS 编程的习惯。以下是一些实用建议：

• 如果你写的代码需要块级作用域、避免变量提升带来的问题，就用 let。
• var 现在一般只用于旧项目维护，或者你想利用它的“函数作用域”特性（比如循环外访问变量）。
• 一般来说，优先使用 let，除非你明确知道为什么要用 var。

补充一点小细节：
在 for 循环中使用 let 是很常见的做法，因为每次迭代都是独立的作用域：

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

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

这就是因为 let 每次循环都有一个独立的变量副本，而 var 是共享的。

基本上就这些了。说到底，let 更安全、逻辑更清晰，适合大多数情况。而 var 的存在更多是为了兼容老代码。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JS进阶干货：letvsvar，这样用才对！》文章吧，也可关注golang学习网公众号了解相关技术文章。