「var、let 和 const，你选对了吗？」

前言：今天在学习React的时候突然想到了一个很基础（弱智）的问题，就是JavaScript 的变量声明方式有何不同？

基础不牢，地动山摇。嘿嘿...

1. var

var 是 JavaScript 最早用于声明变量的关键字，但它存在一些易混淆的特性。

• 作用域：var 是 函数作用域，而不是块级作用域。

  if (true) {
      var x = 10;
  }
  console.log(x); // 输出 10
  

• 变量提升 (Hoisting)

var 声明的变量会被提升到当前作用域的顶部，初始值为 undefined。变量可以在声明之前被访问，但值为 undefined。

console.log(a); // 输出 undefined
var a = 5;

• 允许重复声明

可以在同一作用域内多次声明同名变量。

var a = 10;
var a = 20;
console.log(a); // 输出 20

2. let

• 作用域：let 是 块作用域，只在最近的 {}块中有效。

{
    let b = 10;
    console.log(b); // 10
}
console.log(b); //  b is not defined

• 变量提升 (Hoisting)

​ let 的声明会被提升，但在声明之前的区域不可访问，称为暂时性死区 (Temporal Dead Zone, TDZ)。 ​

console.log(b); //  Cannot access 'b' before initialization
let b = 10;

• 不可重复声明

​ 在同一作用域中，不能重复声明相同名字的变量。

let c = 1;
let c = 2; // SyntaxError: Identifier 'c' has already been declared

3. const

• 作用域：和 let 一样是块作用域。

• 变量提升 (Hoisting)

和 let 一样存在 TDZ，需要在声明之后使用。

• 不可重复声明

与 let 一致，不能重复声明。

• 必须初始化

const 声明时必须同时赋值，且引用类型的变量不能更改引用本身，但可以修改其内容。

const d = 10;
d = 20; // TypeError: 无法给常量变量赋值。
const obj = { key: "value" };
obj.key = "new value"; // 合法
console.log(obj.key); // "new value"