深入理解let，var的区别以及变量提升

let和var的区别是老生常谈的话题，但是不得不说网上很多文章的结论其实是有问题的。查阅了大量官方和网上的资料后，我想总结下let和var的不同，以及谈谈争议最大的话题：let是否有变量提升?

let与var

let是ES6新增的变量类型，是用来替代var的设计，与var不同的是：

1. let使用块级作用域
2. let不支持在同作用域中声明标识符相同的变量
3. let用TDZ禁止了声明前访问

我们一条一条说明：

1. JavaScript的作用域（scope）只有全局和局部，对于var声明的变量，只有函数才能为它创建新的作用域，而let支持块级作用域，花括号就能为它创建新的作用域；
2. 相同作用域，var可以反复声明相同标识符的变量，而let是不允许的;
3. let声明的变量禁止在声明前访问，这也是为什么很多人认为let是不支持变量提升的原因，但真的是这样吗？我们来讨论这个问题：

我们先说明一下什么是变量提升（hoisting）

变量提升

先上一个简单的例子：

console.log(a);//undefined

var a = "hey I am now hoisting";

看起来，我们在a被声明前调用a，没有报错，反而是返回一个undefined值，原因是：a其实已经在调用前被声明了，只是没有被初始化。JavaScript会把作用域里的所有变量和函数提到函数的顶部声明，相当于：

var a;
console.log(a);//undefined

a = "hey I am now hoisting";

JavaScript会使用undefined缺省值创建变量a，注意，事实上浏览器并没有把声明语句放到作用域的顶部，在编译阶段，控制流进入域，该域所有的变量和函数的声明先进入内存，文中代码的相对位置不会变动的。

由此可以知道，变量提升指的是变量声明的提升，不会提升变量的初始化和赋值。

对于let来说，情况有点不同:

console.log(a);//Uncaught ReferenceError: a is not defined

let a = "hey I am now hoisting";

这里抛出了一个错误，浏览器认为a并没有声明，这是否意味着let并没有使a变量提升呢？我们再看一个例子

let a = "hey I am outside";
if(true){
    console.log(a);//Uncaught ReferenceError: a is not defined
    let a = "hey I am inside";
}

注意看，这里同样抛出了一个错误，认为a没有声明，但是，如果a没有变量提升，执行到console.log时应该是输出全局作用域中的a，而不是出现错误。

我们可以推知，这里确实出现了变量提升，而我们不能够访问的原因事实上是因为let的死区（temporal dead zone）设计：当前作用域顶部到该变量声明位置中间的部分，都是该let变量的死区，在死区中，禁止访问该变量。由此，我们给出结论，let声明的变量存在变量提升， 但是由于死区我们无法在声明前访问这个变量。

最后要指出的是，函数也是存在提升（hoisting）的，并且，函数的提升不同于变量的提升，函数相当于把自己的声明、赋值整个的放到了当前作用域的顶部。