ES6之"let"能替代"var"吗?

译者按: 使用 let 的确会比 var 安全很多。

原文: Why You Shouldn’t Use ‘var’ Anymore

译者: Fundebug

为了保证可读性，本文采用意译而非直译。

我已经使用ES2015(ES6)的语法编写JavaScript程序很久了，并且喜欢上它提供的新特性带来的优雅和简洁。我最习惯的就是不再使用 var ,而是 let/const 。我想当然的以为 let 仅仅是 var 的替代者，而事实上 let 还为我们提供了更加精细的作用域。

我大多数时候使用的变量都是用 const 来声明，因为如果尝试对使用 const 声明的变量进行修改，将会报错。这可以避免不小心将一个不该修改的常量值修改。但是，我们还是需要可以声明可以被修改的变量，比如在循环里面的计数器，我们需要不断地对改变了加1。可是为什么我们使用 let 而不是 var 呢？

最简单的答案就是 let 提供块作用域(block-scoping)，这会比 var 提供的以函数为作用域有更加精细化的控制。为了便于理解，我来用一个经典的前端工程师面试的问题来描述两者的区别。

问题: 在下面的例子中，请说出控制台的打印结果。

var callbacks = [];
(function() {
for (var i = 0; i < 5; i++) {
callbacks.push( function() { return i; } );
}
})();
console.log(callbacks.map( function(cb) { return cb(); } ));

我们将for循环执行五次，每次将一个函数push到 callbacks 数组中。最后 callbacks 数组里面的每一个函数的执行结果打印出来。
一个新手工程师经过深思熟虑可能会回答 [0, 1 , 2, 3, 4] , 然而却掉入了 JavaScript 的”hoisting陷阱”。

只有当你理解了hoisting， 才能给出正确的答案 [5, 5, 5, 5, 5] 。

var callbacks = [];
(function() {
var i;
for (i = 0; i < 5; i++) {
callbacks.push( function() { return i; } );
}
})();
console.log(callbacks.map( function(cb) { return cb(); } ));

注意上面的代码， JavaScript 将变量提升到函数定义的顶部，经过整个 for 循环， callbacks 里面存储的5个函数指向的同一个变量 i 的值已经是5。所以最终打印出来的值都为5。

在以前要通过各种奇淫技巧来解决这个问题，并成功返回 [0, 1, 2, 3, 4] , 现在我们有了 let ，就可以很简单解决问题：

var callbacks = [];
(function() {
for (let i = 0; i < 5; i++) {
callbacks.push( function() { return i; } );
}
})();
console.log(callbacks.map( function(cb) { return cb(); } ));

因为 let 拥有块作用域，所以使用 let 声明的变量 i 不会被提升到函数顶部， i 的作用域在 for 循环， 就会每次循环有独立的值。

那我们是不是应该不要使用 var 了呢？如果你想要一个变量拥有函数作用域， var 还是很有用的。