很久很久以前，在 JavaScript 世界里，有一个叫变量镇的地方。这里住着三兄弟：var、let、const。他们都能“装东西”，但性格、规矩、出身背景完全不一样。也正因为这三兄弟的性格差异，程序员江湖里每天都在上演各种事故现场。

今天，我就带你走进变量镇，看看他们各自是怎么“翻车”的，又该如何正确相处。

1、var 关键字：最早的居民

var 是 JavaScript 最早的变量声明方式，堪称上古神器。

在 ES6 之前，整个变量镇几乎被 var 一统江湖。但问题也正是从这里开始的。

2、 var 声明作用域：没有块级概念

在变量镇里，var 有个非常“随意”的性格：它只认函数，不认花括号。

很多新手第一次看到这个结果时，内心都是崩溃的：

“不是写在 if 里面吗？怎么跑出来了？”

在 var 眼里，if、for、while 都不算地盘，只有函数才算真正的边界。

总结一句话：

var 只有函数作用域，没有块级作用域。

3、 var 声明提升：先上车后补票

var 还有一个让人又爱又恨的能力——声明提升。

在 JavaScript 引擎眼里，上面的代码其实是这样执行的：

变量声明被“偷偷”提到了最前面，但赋值还在原地。这就像你先报了名字进群，但个人资料还没填完。

风险点：

不报错

但结果是 undefined

很容易掩盖 bug

后来，ES6 来了，变量镇迎来了新居民：let。

1、let 声明：有边界感的人

let 的出现，第一件事就是：给变量加上边界感。

2、 暂时性死区：我没到，你别碰

let 有一个非常重要的概念：暂时性死区（TDZ）。

直接报错：

在 let 看来：“你可以提前知道我会来，但在我真正登场之前，你不能碰我。”

这和 var 的“先声明后赋值”完全不同。

3、 let 的块级作用域

这一次，变量终于老老实实待在自己的花括号里。

这也是 let 最大的价值之一：减少变量污染，降低心智负担。

4、 全局声明：不会挂到 window 上

而如果是 var：

这意味着：

var 会污染全局对象

let 不会

在大型项目里，这一点尤为重要。

5、 for 循环中的 let：为循环而生

这是 let 最让人拍手叫好的地方。

输出结果：

如果换成 var：

结果是：

原因很简单：

var 只有一个 i

let 每次循环都会创建一个新的 i

一句话总结：只要是循环变量，优先 let。

1、const 声明：不可变的承诺

const 的核心思想是：一旦绑定，就不能重新绑定。

但很多人会误解这一点。

2、const 并不等于“值不可变”

真正不能做的是：

也就是说：

const 锁的是引用

不是对象内部的属性

讲完故事，我们回到现实世界。

1、 不使用 var

这是现代 JavaScript 项目的共识。原因很简单：

容易产生隐式 bug

作用域不直观

不符合现代工程化需求

除非你在维护非常古老的代码，否则：请忘记 var 的存在。

2、 const 优先，let 次之

这是我在团队里反复强调的一条规则。推荐顺序：

能用 const 就用 const

需要重新赋值时，用 let

永远不要用 var

这样做的好处是：

一眼就能看出哪些变量不会变

降低认知成本

代码更安全、更自解释

写到这里，我越来越觉得：

JavaScript 的变量声明，其实特别像人。

var 像没边界感的老前辈，热心但容易添乱

let 像讲规则的现代职场人，清晰、可靠

const 像立下承诺的人，一旦决定就不会轻易改变

当你开始认真选择变量声明方式的时候，说明你已经不再只是“写能跑的代码”，而是在写长期可维护的工程。

如果你觉得这篇文章对你有帮助，欢迎点赞、在看、转发，让更多人认识变量镇的三兄弟。