Variable Hoisting and Temporal Dead Zone | Javascript

Hoisting 和 Temporal Dead Zone(TDZ) 影響 JavaScript 中的變量聲明和初始化。 var . let . const 有各自不同的 Hoisting 和 TDZ 情境，這篇文章將會深入介紹這些的細節。

See the Pen 031-Variable-Hoisting by lenrich (@lenrich) on CodePen.

JavaScript 提升(Hoisting):

提升是 JavaScript 的一種行為，其中變量和函數聲明在編譯階段移至其所在作用域的頂部。這意味著你可以在代碼中的聲明之前使用變量或調用函數。

console.log(hoistedVar); // undefined
var hoistedVar = '我被提升了';
console.log(hoistedVar); // 我被提升了

儘管提升適用於使用var聲明的變量，但重要的是要注意，使用let和const聲明的變量也會被提升，但它們仍然處於“時間死區”。

時間死區（TDZ）:

使用let和const聲明的變量在提升時進入時間死區。在此階段，訪問或使用該變量將導致運行時錯誤。該變量存在，但處於不可訪問的狀態，直到遇到其聲明為止。

console.log(tdZoneVar); // 錯誤: 不能在初始化之前訪問'tdZoneVar'
let tdZoneVar = '我處於時間死區';
console.log(tdZoneVar); // 我處於時間死區