本篇同步發佈在Medium平台上 Medium連結

What is hoisting?

在JavaScript中宣告的變數和函式，會被JavaScript直譯器 (interpreter) 先處理，換句話說，當你在 global 或 function 任何一個位置宣告變數，就像在該 scope 最頂端的位置宣告一樣，這種特性就叫做 Hoisting (提升)。

在我們定義變數、函式的過程中，可以分成 宣告(declaration) 和 賦值(initialization) 兩個過程，只有宣告的內容會在逐行執行程式前先被執行並儲存在記憶體中(hoisting)；賦值的內容則是在hoisting後，逐行執行程式時，才會被執行到。

大綱

• (var)變數宣告的提升

• (function)函式宣告的提升

• (let/const)宣告與Temporal Dead Zone

1. (var)變數宣告的提升

正常印出值

印出undefined

從編譯器的角度來看

2. (function)函式宣告的提升

透過以下的幾個例子，可以得知變數的提升只有宣告部份，而函式的提升是整個函式，因此函式在宣告前是可以執行的。

3. (let/const)宣告與Temporal Dead Zone

let 與 const 也有 hoisting，與 var 的差異在於提升之後，var 宣告的變數會變為 undefined，而 let 與 const 的宣告不會變為 undefined，且在「提升之後」、「賦值之前」的這段期間就存取它，就會拋出錯誤，而這段期間就稱做是 TDZ(Temporal Dead Zone)。