【基础知识】有了 var 为什么还要用 let 声明变量？

ES6 带来了新的变量声明方式：let 和 const。 var、let 都可以用来声明非常量的变量，但它们有一些重要的区别，使得 let 在很多情况下更优于 var。

1. let 具备块级作用域

let 声明的变量具有块级作用域，而 var 声明的变量具有函数作用域。

if (true) {
  var x = 10;
  let y = 20;
}
console.log(x); // 10
console.log(y); // ReferenceError: y is not defined

在这个例子中，x 是在 if 块内声明的，但由于 var 的作用域是函数作用域，因此在 if 块外仍然可以访问。而 let 声明的 y 只在 if 块内有效，块外无法访问。

2. 避免变量提升带来的问题

var 声明的变量会被提升到其作用域的顶部，而 let 声明的变量不会。

console.log(a); // undefined
var a = 10;

console.log(b); // ReferenceError: b is not defined
let b = 20;

在这个例子中，var 声明的 a 在声明之前访问不会报错，但值为 undefined，因为变量提升。而 let 声明的 b 在声明之前访问会报错。

3. 避免重复声明带来的问题

在同一作用域内，var 允许重复声明变量，而 let 不允许。

var c = 1;

// 不会报错
var c = 2;

let d = 1;

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

这种特性使得 let 能避免由于重复声明变量而导致的意外行为，提高代码的可维护性和可读性。

4. 确保变量初始化前不会被访问到

let 和 const 声明的变量存在暂时性死区（Temporal Dead Zone），在变量声明之前无法访问，确保变量初始化前不会被访问到。

// ReferenceError: e is not defined
console.log(e);
let e = 10;

暂时性死区的存在使得代码更加安全，避免在变量声明之前访问它们。