什么是TDZ？在JavaScript当中怎么避免？

简介

TDZ 是 Temporal Dead Zone（暂时性死区）的缩写，是 JavaScript 中 let 和 const 变量的一个概念。在 ES6 中，let 和 const 引入了块级作用域（block scope），而它们声明的变量在声明之前的作用域中是不可访问的，这段不可访问的区域就是 暂时性死区。

什么是暂时性死区（TDZ）？

暂时性死区是指在变量声明之前访问该变量时会导致 ReferenceError 的现象。这是因为 let 和 const 声明的变量在作用域内的存在是“已知的”，但它们的实际值直到执行到声明语句时才会被初始化。
情况：
声明前不可访问：在变量声明之前，访问它会导致错误。
声明后可访问：一旦声明语句执行完毕，变量就进入了“活跃”状态，可以被正常访问。

TDZ 的触发情况

TDZ 会在你尝试 访问 变量而该变量还处于“暂时性死区”时触发。它并不会在你声明变量的时候触发，只会在你 使用 变量之前触发。以下是一些典型的情况：

1. 在声明之前访问变量
2. 在未声明的块级作用域内使用变量
3. 在参数默认值中使用 TDZ 变量

示例 1：在声明之前访问变量

console.log(x);  // ReferenceError: Cannot access 'x' before initialization
let x = 10;

在这个例子中，let x 的声明使得 x 在其作用域中存在，但它还没有被初始化。在 let x 之前访问 x 会触发 TDZ 错误，抛出 ReferenceError。

示例 2：块级作用域中的 TDZ

{console.log(y);  // ReferenceError: Cannot access 'y' before initializationlet y = 5;
}

在这个块级作用域中，y 在块的作用域范围内是“已知”的，但由于它的声明在后面，试图在 let y 之前访问 y 会触发 TDZ 错误。

示例 3：函数参数默认值中的 TDZ

function foo(x = y, y = 2) {return [x, y];
}

foo(); // ReferenceError: Cannot access ‘y’ before initialization
在这个例子中，函数的默认参数 x = y 依赖于参数 y，而 y 在 x 之前定义。这会导致 x 的默认值表达式在 y 被初始化之前使用 y，触发 TDZ 错误。

示例 4：const 的暂时性死区

const 声明的变量也存在 TDZ，并且它们的初始化是不可更改的（必须在声明时赋值）

console.log(z); // ReferenceError: Cannot access 'z' before initialization
const z = 20;

const z 的行为和 let 相似，z 在声明之前是不可访问的，会触发 TDZ 错误。

如何避免 TDZ 错误？

要避免 TDZ 错误，需要遵循以下几条规则：

1. 声明前不要访问变量：始终在变量初始化后再进行使用。
2. 在同一个块级作用域中声明和使用变量：避免在块作用域内跨越声明时使用变量。
3. 小心参数默认值的顺序：在函数参数默认值中，要注意依赖的变量是否已经声明。

TDZ 的实际用途

TDZ 的主要作用是确保代码更加健壮并且有助于开发者避免一些常见的编程错误：

1. 防止未初始化变量的使用：TDZ 确保在变量声明之前无法使用该变量，这减少了未初始化变量引发的潜在错误。
2. 约束 const 和 let
   变量的正确使用：由于 var 声明是函数作用域且会被提升，很多 JavaScript 开发者在 ES5
   之前容易犯因变量提升（Hoisting）导致的错误。let 和 const 的 TDZ
   强制要求开发者必须在变量声明之后再使用它们，从而避免这些问题
3. 帮助代码可读性：TDZ
   让代码更加明确，开发者在编写代码时可以清晰地知道哪些变量可用，哪些变量尚未初始化。 TDZ 与 var 的区别 与 let 和
   const 相比，var 变量的行为不同，var 声明的变量会被提升到作用域的顶部，并且在初始化前，它们的值是
   undefined，而不是处于 TDZ 中。

示例：

console.log(a);  // undefined （变量提升，值为 undefined）var a = 10;

这里，var 声明的变量 a 在作用域内被提升，但它的值是 undefined，因此不会触发 TDZ 错误。相对比，如果使用 let 或 const，你会在声明前得到 ReferenceError。