let和var的区别详细解释

var

var 声明作用域

使用 var 操作符定义的变量会成为包含它的函数的局部变量。比如，使用 var 在一个函数内部定义一个变量，就意味着该变量将在函数退出时被销毁：

function test() {
 var message = "hi"; // 局部变量
}
test();
console.log(message); // 出错！

不过，在函数内定义变量时省略 var 操作符，可以创建一个全局变量：

function test() { 
	message = "hi"; // 全局变量
}
test();
console.log(message); // "hi"

var 声明提升

使用 var 时，下面的代码不会报错。这是因为使用这个关键字声明的变量会自动提升到函数作用域顶部：

function foo() {
 console.log(age);
 var age = 26;
}
foo(); // undefined

之所以不会报错，是因为 ECMAScript 运行时把它看成等价于如下代码：

function foo() {
 var age;
 console.log(age);
 age = 26;
}
foo(); // undefined

这就是所谓的“提升”（hoist），也就是把所有变量声明都拉到函数作用域的顶部。此外，反复多次使用 var 声明同一个变量也没有问题：

function foo() {
 var age = 16;
 var age = 26;
 var age = 36;
 console.log(age);
}
foo(); // 36

let

块作用域

let 跟 var 的作用差不多，但有着非常重要的区别。最明显的区别是，let 声明的范围是块作用域，而 var 声明的范围是函数作用域。

if (true) {
 var name = 'Matt';
 console.log(name); // Matt
}
console.log(name); // Matt 

if (true) {
 let age = 26;
 console.log(age); // 26
}
console.log(age); // ReferenceError: age 没有定义

在这里，age 变量之所以不能在 if 块外部被引用，是因为它的作用域仅限于该块内部。块作用域是函数作用域的子集，因此适用于 var 的作用域限制同样也适用于 let。

let 也不允许同一个块作用域中出现冗余声明。这样会导致报错：

var name;
var name;
let age;
let age; // SyntaxError；标识符 age 已经声明过了

当然，JavaScript 引擎会记录用于变量声明的标识符及其所在的块作用域，因此嵌套使用相同的标识符不会报错，而这是因为同一个块中没有重复声明：

var name = 'Nicholas';
console.log(name); // 'Nicholas'
if (true) {
 var name = 'Matt';
 console.log(name); // 'Matt'
}
let age = 30;
console.log(age); // 30
if (true) {
 let age = 26;
 console.log(age); // 26
}

对声明冗余报错不会因混用 let 和 var 而受影响。这两个关键字声明的并不是不同类型的变量，它们只是指出变量在相关作用域如何存在

var name;
let name; // SyntaxError
let age;
var age; // SyntaxError

暂时性死区(变量不提升)

let 与 var 的另一个重要的区别，就是 let 声明的变量不会在作用域中被提升。

// name 会被提升
console.log(name); // undefined
var name = 'Matt';
// age 不会被提升
console.log(age); // ReferenceError：age 没有定义
let age = 26;

在解析代码时，JavaScript 引擎也会注意出现在块后面的 let 声明，只不过在此之前不能以任何方式来引用未声明的变量。在 let 声明之前的执行瞬间被称为“暂时性死区”（temporal dead zone），在此阶段引用任何后面才声明的变量都会抛出 ReferenceError。

条件声明

在使用 var 声明变量时，由于声明会被提升，JavaScript 引擎会自动将多余的声明在作用域顶部合并为一个声明。因为 let 的作用域是块，所以不可能检查前面是否已经使用 let 声明过同名变量,因此同时声明会报错

<script>
 var name = 'Nicholas';
 let age = 26;
</script>
<script>
 // 假设脚本不确定页面中是否已经声明了同名变量
 // 那它可以假设还没有声明过
 var name = 'Matt';
 // 这里没问题，因为可以被作为一个提升声明来处理
 // 不需要检查之前是否声明过同名变量
 let age = 36;
 // 如果 age 之前声明过，这里会报错
</script>

使用 try/catch 语句或 typeof 操作符也不能解决，因为条件块中 let 声明的作用域仅限于该块。

<script>
 let name = 'Nicholas';
 let age = 36;
</script>
<script>
 // 假设脚本不确定页面中是否已经声明了同名变量
 // 那它可以假设还没有声明过
 if (typeof name === 'undefined') {
 let name;
 }
 // name 被限制在 if {} 块的作用域内
 // 因此这个赋值形同全局赋值
 name = 'Matt';
 try {
 console.log(age); // 如果 age 没有声明过，则会报错
 }
 catch(error) {
 let age; 
   }
 // age 被限制在 catch {}块的作用域内
 // 因此这个赋值形同全局赋值
 age = 26;
</script>

为此，对于 let 这个新的 ES6 声明关键字，不能依赖条件声明模式。

for 循环中的 let 声明

在 let 出现之前，for 循环定义的迭代变量会渗透到循环体外部：

for (var i = 0; i < 5; ++i) {
 // 循环逻辑
}
console.log(i); // 5

改成使用 let 之后，这个问题就消失了，因为迭代变量的作用域仅限于 for 循环块内部：

for (let i = 0; i < 5; ++i) {
 // 循环逻辑
}
console.log(i); // ReferenceError: i 没有定义

在使用 var 的时候，最常见的问题就是对迭代变量的奇特声明和修改：

for (var i = 0; i < 5; ++i) { 
	setTimeout(() => console.log(i), 0)
}
// 你可能以为会输出 0、1、2、3、4
// 实际上会输出 5、5、5、5、5

之所以会这样，是因为在退出循环时，迭代变量保存的是导致循环退出的值：5。在之后执行超时逻辑时，所有的 i 都是同一个变量，因而输出的都是同一个最终值。而在使用 let 声明迭代变量时，JavaScript 引擎在后台会为每个迭代循环声明一个新的迭代变量。每个 setTimeout 引用的都是不同的变量实例，所以 console.log 输出的是我们期望的值，也就是循环执行过程中每个迭代变量的值。

这种每次迭代声明一个独立变量实例的行为适用于所有风格的 for 循环，包括 for-in 和 for-of 循环。

红宝书-let和var的区别详细解释