在 ES6 出现之前，js 定义变量的关键字只有 var。 在 ES6 之后才新增了 let 和 const。
新的变量声明关键字出现，也带来了一些新的变化。Enjoy it :)
var
在 ES6 出现以前， JavaScript 定义变量的关键字只有 var
声明作用域
使用 var 操作符定义的变量，会成为包含它的函数的局部变量，这意味着该变量会在函数退出的时候被销毁。
function foo() {
var name = 'foo';
console.log(name); // foo
}
foo();
console.log(name); // Error全局变量
如果在定义变量时，没有使用 var 关键字，这时候，所声明的变量将会变成全局变量。
function foo() {
// without keyword 'var'
name = 'foo';
console.log(name); // foo
}
foo();
console.log(name); // foo上述代码将会变成下述代码，变量 name 的声明被提到了全局顶部。虽然可以通过这种方式来声明一个全局变量，这种方式强烈不推荐，这会使得全局变量被污染，也会使得代码变得难以维护。
var name;
function foo() {
name = 'foo';
}
在严格模式下，如果未声明直接进行赋值操作，会直接抛出 ReferenceError 异常。
提升 Hoisting
在开始这小节之前，先思考一下下述代码会打印什么内容呢? 会直接报错抛出 Error 么? 还是正常打印出一个 foo? 或者是 undefined?
function foo() {
console.log(name);
var name = 'foo';
}在解答之前，首先明确，声明和赋值其实是两个动作。 当我们用 var name = 'foo', 其实这里面包含着两个动作：声明和赋值。首先是声明 var name, 声明了一个 name 的变量，其次是赋值，将 name 赋值为 foo。
现在开始回答，上述代码不会报错。当使用 var 进行变量声明时，这时变量的声明会自动提升到函数作用域的顶部，然后执行打印，这时候，name 还是一个只声明为赋值的变量，所以这时候打印 name 会打印出 undefined, 之后才执行变量的赋值操作。听起来云里雾里，也就是，上面的代码实际执行的顺序如下：
function foo() {
var name;
console.log(name); // undefined
name = 'foo';
}所谓的变量提升指的就是将所有变量声明提升到函数作用域顶部，如果声明多次，只要在同一个作用域内，重复声明也没有关系。但是注意，赋值依旧会停留在原地。提升只针对声明而言，赋值依旧是按照原来的顺序进行赋值操作。
function foo() {
console.log(name); // undefined
var name = 'foo';
var name = 'bar';
console.log(name); // bar
var name = 'ba1r';
console.log(name); // ba1r
var name = 'bar2';
}let & const
let 和 const 是自 ES6 发布以来新增的变量定义关键字，和 var 最大的差异是，新增的 let 和 const 是块级作用域，而非是函数作用域。
块级作用域
let 和 const 是块级作用域。JavaScript 引擎会记录用于变量声明的标识符及其块作用域。块级作用域顾名思义，它的作用域仅限于该块的内部。
if (true) {
let age = 30;
console.log(age); // 30
}
console.log(age); // ReferenceError: age is not definedQuick question: 下面的执行结果是什么呢？ 可以自己动手试试看。
{
let a = 42;
}
console.log(a); // ?
No hoisting & TDZ 暂时性死区
经由 var 声明的变量是可以重复进行声明，得益于 hoisting, 所有的变量声明是会提升到作用域的顶部，所以即使重复声明也是没有问题的。和 var 不同， let 和 const 的变量声明是不会在作用域中提升的。在解析代码的时候，JavaScript 引擎会注意到块作用域中，会存在一个 let的声明，在执行到对应语句之前，不能用任何方式来引用未声明的变量。由此引出了一个 暂时性死区 temporal dead zone 的概念。
TDZ (temporal dead zone)
TDZ 是 ES6 规范中定义的一个新的概念，指的是由于代码中的变量尚未进行初始化而无法被引用的情况。 在执行到对应语句之前，无法用任何方式来引用尚未声明的变量。因此，在块级作用域执行到对应 let的声明之前，称之为暂时性死区 (temporal dead zone, TDZ)。 如下文的代码，在执行到实际声明 age 之前，如果引用到 age 这个变量，会抛出 ReferenceError。
if (true) {
console.log(age); // ReferenceError: Cannot access 'age' before initialization
let age = 30;
}同样的， 在函数参数再传参过程中也有所谓的“死区”，举个例子
function bar(x = y, y = 2) { ... }这个时候， y 尚未被声明，所以这样的参数声明会报错。而，下面这种情况，调换了 x 和 y 的顺序，在访问 y 时，刚好跨出了 x 的 TDZ， 所以y的这种访问方式则没有问题。
function bar(x = 2, y = x) { ... }
由于 const 变量要求声明时立刻进行初始化，则不存在 TDZ 的问题。
全局声明
var 在全局作用域中声明的变量会成为 window 对象的属性； 而 let 在全局作用域声明的变量，不会成为 window 对象的属性。
但是相同的是，在全局作用域发生的声明，会在生命周期内续存。因此，let 必须保证不会重复声明同一变量。
typeof & try...catch 的陷阱
划重点！let 和 const 是块级作用域。 在下述的例子中，let 的声明都会被限制在对应的块级作用域之中，所以无法实现对应的条件声明的效果。
if (typeof name === 'undefined') {
let name; // name 只存在于 if{...} 之中
}try {
console.log(age);
} catch {
let age = 25;
console.log(age); // age 只存在于 catch 之中
}循环利器
我们经常会看到一道面试题，请问到底会打印出什么内容。
for (var i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i); // 5, 5, 5, 5, 5
}, 200);
}这是因为，使用了定时器，打印被延迟执行。而 var 声明的变量是函数作用域， i 已经走到了 5。 当定时器实际 log 的时候，其实循环已经执行完毕了，所以打印出来了 5 个 5。
如果我们更换成了 let 来声明迭代变量，则能够打印出 0,1,2,3,4。 这是因为，改用了 let 之后，每次迭代作用域被限制在了 for 循环块内部。 JavaScript 引擎会为每个迭代循环声明一个新的迭代变量，因此，每个定时器引用的都是不同的变量实例，也就是循环执行过程中每个迭代变量的值。
for (let i = 0; i < 5; i++) {
setTimeout(() => {
console.log(i); // 0, 1, 2, 3, 4
}, 200);
}What about const
前面经常把 let 和 const 并列起来讲。但是，let 和 const 之间也是有些许的差异。主要的差异点可以从 const 的这个单词看出来， const means constant， 意为常量，使用const 声明的变量存在不可变性，变成一个“常量”。
let 和 const 的行为最大的差异，在于 const 的声明和赋值操作必须同时，尝试修改 const 声明的变量会导致运行时出错。
但是，const 声明的限制只适用于它所指向的变量的引用。换言之，如果 const 变量引用了一个对象，那么修改这个对象内部的属性值并不违反 const 的限制。
const a = 2;
a = 3; // TypeError: Assignment to constant variable.
const obj = { a: 2 }
obj.a = 4; // It's okSummary
ES6 所增加的 let 和 const 可以帮助 JavaScript 社区解决长久以来 var 的诡异执行方式带来的一系列烦恼。 let 和 const 这两个块级作用域变量声明关键字，可以让开发过程中，对于变量声明的作用域和语义提供了更加精确的支持，有助于开发过程的代码理解和代码质量的提升。
在实际开发过程中，更加提倡使用 let 和 const，这可以让变量的声明、使用变得更加可预测。同时，只有当开发者预期会发生变化的变量时，才推荐使用 let，这会更加有助于问题的发现和解决。简单总结一下， var、 let 和 const 之间的异同点。
| 声明方式 | 作用域 | 提升 hoisting | 初始化 |
|---|---|---|---|
var |
函数作用域 | 使用 var 会将变量声明提升到函数作用域顶部 |
可以声明之后再进行初始化 |
let |
块级作用域 | 不会进行提升 | 可以声明之后再进行初始化 |
const |
块级作用域 | 不会进行提升 | 必须同时进行初始化 |
Reference
- JavaScript高级程序设计（第4版）—— chap 3
- 你不知道的 JavaScript 中卷 —— chap 5