JavaScript，再次举例对比let和var的区别，为什么使用let？

我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

JavaScript中的let和var，苏南大叔已经写过两篇相关文章了，链接请参考文章底部的相关文章。具体的说来，前两篇文章的思想就是：大体上看，两者都是变量定义。但是在变量作用域范围上，是有区别的。而网上普遍的说法是：使用let的话，更容易定位错误所在位置。

那么，大家也许想了，如果我不想定位错误所在位置呢？或者，可以通过严密的逻辑来控制错误的发生呢？那么，这里还有使用let而不使用var的理由么？答案是：有！

本文测试环境：win10，chrome@90.0.4430.212。

系列文章

本文是系列文章第四篇：

• 《js中的var作用域是如何生效的？》 https://newsn.net/say/js-var.html
• 《js中的let作用域是如何生效的？》 https://newsn.net/say/js-let.html
• 《var和let到底有啥区别》 https://newsn.net/say/js-var-vs-let.html
• 《再次举例对比let和var的区别，为什么使用let》 https://newsn.net/say/js-var-vs-let-2.html

往期回顾，控制错误信息

先看看，没涉及变量提升概念之前的代码例子：

avar = "avar";
(function () {
    console.log(avar)
})()

var cvar = "cvar";
(function () {
    console.log(cvar)
})()

let elet = "elet";
(function () {
    console.log(elet)
})()

let有个说法，叫做：暂时性死区（temporal dead zone，简称TDZ）。苏南大叔是这么理解的：在有let定义的区块内，在let定义之前，任何使用对应变量的行为，都会触发致命错误，程序停止运行。

以下代码，都会报错：

console.log(alet)
let alet = "let"

Uncaught ReferenceError: Cannot access 'alet' before initialization

let flet = "flet";
(function () {
    console.log(flet)
    let flet = "flet"
})()

如果把上述结论，换成var的话，在var变量定义之前，使用相关变量的行为，并不会得到致命错误提示，相关变量只是一个undefined。这是因为var具有一个变量提升的副作用。

var dvar = "dvar";
(function () {
    console.log(dvar)
    var dvar = "dvar"
})()

console.log(evar)
var evar = "evar";

总结上来说，只要区块里面有let定义，那么从区块开始到let定义之间就是传说中的“暂时性死区”。在这个死区之内，任何试图使用相关变量的行为，都会被触发致命错误！而换成var，或者不指明的情况下，并不会触发报错，最多仅仅是输出undefined。let性格很刚烈，容不得一点沙子。var性格很温和，怎么写都是可以的。

let天然await

下面有段小程序，可以给你个不可拒绝的理由，来使用let而不是var。

下面的例子中，变量i循环从0到3。在循环体内，使用setTimeout来输出i。那么，这个需求里面，应该使用var还是let呢？或者说两者都可以呢？

估计大家都应该认为是：两者都可以。事实上，使用let才是正解。使用var，并不能得到预期值！

看实际执行结果：

for (var i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000);
}

var输出的是：3 3 3。

for (let i = 0; i < 3; i++) {
    setTimeout(() => {
        console.log(i)
    }, 1000);
}

而let输出的是0 1 2。

分析理由的话，可能let有点天然的await的感觉？哈哈。苏南大叔自己瞎猜的。当然，这里还有个“几乎同时输出”的问题，所以，这个代码还是有提升的空间，待日后再次发掘了。

相关文章

• https://newsn.net/say/js-let.html
• https://newsn.net/say/js-var-vs-let.html

总结

这里，再次总结了let和var的小小区别，大家可以看到：除了需要正准确的发现错误的目的外，在特定情形下，使用let才是程序正确运行的关键所在。这可以说是使用let的一个比较好的理由了吧？

觉得有收获的话，欢迎打赏评论转发。更多精彩文章，可以点击：

• https://newsn.net/tag/js/

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。