变量声明 let vs var

2023-12-24 10:07:45

let 和 var：JavaScript 中变量声明的终极指南

在 JavaScript 中，变量声明对于存储和管理数据至关重要，而 let 和 var 是两种最常用的。本文将深入探讨 let 和 var 的区别，并解释为什么 let 已成为首选选择。

块级作用域 vs. 函数作用域

let 和 var 之间的主要区别在于它们的作用域。let 声明的变量具有块级作用域，这意味着它们仅在声明它们的代码块内有效。而 var 声明的变量具有函数作用域，这意味着它们在整个函数内都有效，包括所有嵌套块。

考虑以下示例：

// 全局作用域
var x = 10;

// 块级作用域
if (true) {
  let y = 20;
}

console.log(x); // 输出: 10
console.log(y); // 输出: ReferenceError: y is not defined

在上面的示例中，x 是使用 var 声明的，因此它具有函数作用域，可以在整个函数中访问。然而，y 是使用 let 声明的，它具有块级作用域，只能在 if 块内访问。一旦离开该块，它就不再存在。

暂时性死区（TDZ）

另一个关键区别是 let 声明的变量在声明之前不可用，而 var 声明的变量在声明之前可用。这意味着：

let： 变量在声明之前处于暂时性死区 (TDZ)，尝试访问它将导致 ReferenceError。
var： 变量在声明之前可以访问，即使它尚未被赋值。

这个特性对于防止意外的全局变量和命名冲突非常有用。

其他区别

除了作用域和 TDZ 之外，let 和 var 还有一些其他区别：

块级重新声明： let 允许在同一块内重新声明变量，而 var 不允许。
const： const 是 ES6 中引入的另一个变量声明关键字，它用于声明常量（不可更改的变量）。const 只能在声明时赋值。

为什么 let 能替代 var

let 已成为 JavaScript 中的首选变量声明方式，原因如下：

更好的作用域控制： 块级作用域有助于防止意外的全局变量和命名冲突。
TDZ： 它有助于防止在未初始化的情况下使用变量，从而提高代码的健壮性。
与 ES6 一致： let 是 ES6 引入的，与 JavaScript 的现代标准保持一致。

代码示例

以下代码示例展示了 let 和 var 在实际应用中的区别：

// 使用 var
function exampleVar() {
  if (true) {
    var num = 10;
  }
  console.log(num); // 输出: 10
}

exampleVar();


// 使用 let
function exampleLet() {
  if (true) {
    let num = 20;
  }
  console.log(num); // 输出: ReferenceError: num is not defined
}

exampleLet();