var、let、const的区别

你是否想过 JavaScript 中明明有var用来声明变量，但是为什么ES6中又加了let和const呢？ 本篇将介绍三者之间的区别。

var: 我有什么错？

你没有错，错的是这个世界…… 嗯… (先安慰下)

然后我们转身，先来看代码：

function fn() {
  console.log(i); // undefined
  console.log(test); // undefined
  for (var i = 0; i < 5; i++) {
    var test = "hello!";
    var test = "world!";
    // todo ...
  }
  console.log(i); // 5
  console.log(test); // world!
}

fn();

以上这段代码暴露了var的不合理性，这也经常成为面试题的一种来调戏很多同学。

1. 变量声明提升。
2. 作用域问题。var变量的作用域有两种：全局级和函数块级，而这经常会带来困扰。
3. 可以重复声明。尤其是在多人协作开发时，这种变量覆盖会导致隐形 bug。

let & const: 前辈的不足，我来弥补！

这小伙子前途无量啊…

相比var，let和const做到了：

1. 块级作用域。
2. 同级作用域下，不允许重复声明。
3. 不会在顶层对象上创建相应的属性。

// 1. 块级作用域。
if (true) {
  let a = 1;
}
console.log(a);

// 2. 同级作用域下，不允许重复声明。
let b = 1;
let b = 2; // 报错

// 3. 不会在顶层对象上创建相应的属性。
var c = 1;
let d = 1;
console.log(this.c); // 1
console.log(this.d); // undefined

const: 我要保护我老大…

一般来说const声明的常量不能被重新赋值，但如果是对象或者数组，可以修改其对象属性或者扩展数组。

还有，使用const声明时，必须同时进行赋值，否则会报错。

const MY_CONSTANT = 1;

MY_CONSTANT = 2; // Uncaught TypeError: Assignment to constant variable.

const MY_OBJ = {
  key: "value",
};

// 😒
MY_OBJ = {
  other_key: "other_value",
}; // Uncaught TypeError: Assignment to constant variable.

// But... 这是👌🏻的
MY_OBJ.key = "other_value";

const MY_ARR = ["A", "B", "C"];

// 😒
MY_ARR = ["1", "2", "3"]; // Uncaught TypeError: Assignment to constant variable.

// But... 这也是👌🏻的
MY_ARR.push("D", "E");

// 😒，得赋值啊...
const EMMM; // Uncaught SyntaxError: Missing initializer in const declaration

暂时性死区（TDZ）

记住：不要在声明之前使用let或const声明的变量或常量，甚至typeof也不行。

{
  console.log(hamburger); // ReferenceError
  let hamburger = "🍔";

  console.log(typeof pizza); // Uncaught ReferenceError: pizza is not defined
  const pizza = "🍕";

  var apple = "🍎";
  if (apple) {
    // 赋值语句是从右往左执行的，apple + '🍎' 中的apple 是 let apple 的这个apple... 而不是 var apple = '🍎' 的apple... 😄
    // 所以右边执行的时候那个apple还没初始化，所以apple还在TDZ当中...
    let apple = apple + "🍎"; // Uncaught ReferenceError: Cannot access 'apple' before initialization
  }
}