var VS. let VS. const

var 关键字

1. var 声明作用域

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

function test() {
  var message = 'wb'; // 局部变量
}
test();
console.log(message); // 报错
复制代码

这里message变量在函数中使用var定义的，函数test调用之后，变量message随即被销毁，不过函数内部定义变量时如果省略var 操作符，可以创建一个全局变量：

function test() {
	message = "wb";
}
test();
console.log(message); // "message"
复制代码

才删除 var 操作符之后，message变成了全局变量，只要调用一次test函数，就会定义在全局中，并且可以在函数外部访问。

如果需要定义多个变量，可以在一条语句中用逗号分隔每个变量（及可选的初始化）:

var message = "wb",
    found = false,
    age = 24;
复制代码

在严格模式下，不能定义名为eval和arguments的变量，否则会导致语法错误。

2. var声明提升

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

function demo() {
  console.log(age);
  var age = 24;
}
demo(); // undefined
复制代码

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

function demo() {
  var age;
  console.log(age);
  age = 24;
}
demo(); // undefined
复制代码

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

function demo() {
  var age = 21;
  var age = 22;
  var age = 23;
  var age = 24;
  console.log(age);
}
demo(); // 24
复制代码

let 声明

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

if (true) {
  var name = "wangbin";
  console.log(name); // "name"
}
consol.log(name); // "wangbin"
if (true) {
  let age = "24";
  console.log(age); // 24
}
console.log(age); // ReferenceError: age没有定义
复制代码

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

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

var name;
var name;

let age;
let age; // SyntaxError: 标识符age已经声明过了
复制代码

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

var name = "wangbin";
console.log(name); // "wangbin"
if (true) {
  var name = "yunuonan";
  console.log(name); // "yunuonan"
}
let age = 22;
console.log(age); // 22
if (true) {
  let age = 24;
  console.log(age); // 24
}
复制代码

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

var name;
let name; // SyntaxError

let age;
var age; // SyntaxError
复制代码

1. 暂时性能死区

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

   // name 会被提升
   console.log(name); // undefined
   var name = "wangbin";
   
   // age 不会被提升
   console.log(age); //ReferenceError: age没有定义
   let age = 24;
   复制代码

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

2. 全局声明

   与var关键字不同，使用let在全局作用域中声明的变量不会成为window对象的属性（var声明的变量则会）。

   var name = 'wangbin';
   console.log(window.name); // "wangbin"
   
   let age = 24;
   console.log(window.age); // undefined
   复制代码

   不过，let声明仍然是在全局作用域中发生的，相应变量会在页面的生命周期中存续。因此，为了避免SyntaxError,必须确保页面不会重复声明同一个变量。

3. 条件声明

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

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

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

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

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

4. for循环中的let 声明

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

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

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

   for (let i = 0; i < 5; ++i) {
     // 循环逻辑
   }
   conosole.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 (let i = 0; i < 5; ++i) {
     setTimeout(() => console.log(i));
   }
   // 会输出 0,1,2,3,4
   复制代码

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

const 声明

const行为和let基本相同，唯一一个重要的区别是用它声明的变量必须同时初始化变量，且尝试修改const 声明的变量会导致运行错误。

const age = 24;
age = 25; // TypeError: 给常量赋值

// const 也不允许重复声明
const name = "wangbin";
const name = "yunuonan"; // SyntaxError

// const 声明的作用域也是块
const name = "wangbin";
if (true) {
  const name = "yunuonan";
  console.log(name); // "yunuonan"
}
console.log(name); // "wangbin"
复制代码

const 声明的限制只适用于它指向的变量的引用。换句话说，如果const变量引用的是一个对象，那么修改这个对象内部的属性并不违反const限制。

const person = {};
perosn.name = "wangbin";
复制代码

即使JavaScript引擎会为for循环中的let声明分别创建独立的变量实例，而且const变量跟let变量很相似，也不能用const来声明迭代变量（因为迭代变量会自增）：

for (const i = 0; i < 5; ++i) {} // TypeError: 给常量赋值
复制代码

不过，如果你只想用const 声明一个不会被修改的for循环变量，那也是可以的。也就是说，每次迭代只是新创建一个新变量。这对for-of和for-in循环特别有意义：

let i = 0;
for (const j = 7; i < 5; ++i) {
  console.log(j);
}
// 5,5,5,5,5

for(const key in {a: 1, b: 2}) {
  console.log(key);
}
// a,b

for(const value of [1,2,3,4,5]) {
  console.log(value);
}
// 1,2,3,4,5
复制代码