悠悠楠杉
网站页面
JS变量如何声明：var、let、const使用区别与场景
11/24
![]()
在JavaScript开发中，变量是程序运行的基础。随着语言的演进，JS提供了三种声明变量的方式：var、let 和 const。虽然它们都能用来定义变量，但在实际使用中，三者的行为差异显著，理解这些差异对于写出安全、可维护的代码至关重要。
早期的JavaScript仅支持 var 来声明变量。然而，由于其存在变量提升和函数作用域等特性，常常导致一些难以预料的bug。为了解决这些问题，ES6（ECMAScript 2015）引入了 let 和 const，带来了更清晰的作用域规则和更严格的变量管理机制。
首先来看 var。使用 var 声明的变量具有函数作用域，而不是块级作用域。这意味着在一个 if 或 for 语句块中用 var 声明的变量，实际上在整个函数内部都是可访问的。例如：
js
function example() {
if (true) {
var message = "Hello";
}
console.log(message); // 输出 "Hello"
}
这往往不符合开发者的直觉，容易引发变量污染或意外覆盖的问题。此外，var 存在“变量提升”现象——即变量声明会被自动提升到当前作用域顶部，但赋值不会。因此，以下代码不会报错：
js
console.log(name); // undefined
var name = "Alice";
这种行为增加了调试难度，也降低了代码的可读性。
相比之下，let 的出现正是为了弥补 var 的缺陷。let 声明的变量具有块级作用域，只能在声明它的 {} 内部访问。上面的例子如果改用 let，就会抛出引用错误：
js
function example() {
if (true) {
let message = "Hello";
}
console.log(message); // ReferenceError: message is not defined
}
这大大增强了代码的封装性和安全性。同时，let 不允许重复声明同一变量，避免了命名冲突。值得注意的是，let 虽然也存在提升，但它进入了“暂时性死区”（Temporal Dead Zone），在声明前访问会直接报错，而不是返回 undefined。
接着是 const。它用于声明一个常量，一旦赋值就不能再更改。这里的“不能更改”指的是绑定不能变，但如果值是对象或数组，其内部属性仍可修改：
js
const user = { name: "Bob" };
user.name = "Charlie"; // 合法
user = {}; // 报错：Assignment to constant variable.
因此，const 更适合用来声明那些不打算重新赋值的变量，比如配置项、DOM元素引用或函数。
在实际开发中，推荐优先使用 const，只有在明确需要重新赋值时才使用 let，而尽量避免使用 var。现代前端框架如React、Vue等的编码规范普遍遵循这一原则。这不仅提高了代码的可读性，也减少了潜在的错误。
总结来说，var 是历史遗留方案，适用于老旧项目维护；let 提供了灵活的块级作用域，适合循环计数器或需要重新赋值的场景；const 则强调不可变性，适用于大多数变量声明，尤其是引用类型和配置数据。掌握这三者的区别，是写出高质量JavaScript代码的第一步。
