基础篇 | 变量 var-let-const

在 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 defined

Quick 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 ok

Summary

ES6 所增加的 let 和 const 可以帮助 JavaScript 社区解决长久以来 var 的诡异执行方式带来的一系列烦恼。 let 和 const 这两个块级作用域变量声明关键字，可以让开发过程中，对于变量声明的作用域和语义提供了更加精确的支持，有助于开发过程的代码理解和代码质量的提升。

在实际开发过程中，更加提倡使用 let 和 const，这可以让变量的声明、使用变得更加可预测。同时，只有当开发者预期会发生变化的变量时，才推荐使用 let，这会更加有助于问题的发现和解决。简单总结一下， var、 let 和 const 之间的异同点。

Reference

1. JavaScript高级程序设计（第4版）—— chap 3
2. 你不知道的 JavaScript 中卷 —— chap 5