[進階 js 07] Temporal Dead Zone

這邊要來講 let 跟 const 與 hoisting
先複習一下 hoisting

console.log(a)
var a = 10

答案會是 undefined

但如果是用 let

console.log(a)
let a = 10

答案會是 ReferenceError : a is not defined，換成 const 也是一樣
那 let 是不是沒有 hoisting ?

但看以下範例

let a = 10
function test() {
    console.log(a)
    let a = 30
}

test()

如果沒有 hoisting 那 a 應該就會是 10
如果有 hoisting，那 let a = 30 應該會被提升，而 log 出來的 a 就會是 undefined
但出來的結果卻還是一樣 ReferenceError : a is not defined

那到底 let 跟 const 有沒有 hoisting

先講結果: 答案是有的
因為上面例子，如果沒有 hoisting 那 a 應該就會是 10

但 let 跟 const 的 hoisting，底層運作不太一樣

以上面例子可以看成下面這樣

let a = 10
function test() {
    let a
    console.log(a)
    a = 30
}

test()

let 跟 const 和 variable 不一樣的地方 : TDZ：Temporal Dead Zone

用 let 跟 const 直到執行 a = 30 這行以前，都不能去存取 a
一旦去存取 a ，就會出現 ReferenceError
所以從進入 function test 開始
在提升之後以及 a 被賦值之前的這段期間就叫 TDZ：Temporal Dead Zone
中文有的翻譯叫做暫時性死區
所以在這 Temporal Dead Zone 存取就會出現錯誤