JavaScript 入門：提升 Hoisting 是什麼?

JavaScript Hoisting 提升

什麼是提升 Hoisting

Hoisting 指的是，JavaScript 在執行程式碼之前，先掃瞄整個作用域，並將宣告拉到作用域最上方的行為。

Hoisting 只會提升宣告，不會提升賦值。

變數宣告的提升

var 的提升

範例

console.log(a);
var a = 10; 

結果

undefined

這個例子中，程式會正常執行不報錯，但是印出 undefined。

因為 var 宣告的 a 被提升了，而賦值的程式碼還留在原地， JS 執行起來會像是：

var a; // 宣告被提升
console.log(a); // 嘗試印一個還沒被賦值的 a
a = 10; // 賦值

這也是為何會出現 undefined 的原因。

let/ const 的提升

let 範例

console.log(b); 
let ​b = 10; 

let 結果

ReferenceError: Cannot access 'b' before initialization

const 範例

console.log(c); 
const ​c = 10; 

const 結果

ReferenceError: Cannot access 'c' before initialization

從結果看來，不論是 let 與 const，兩者在宣告前嘗試先存取變數都會出現錯誤，這是因為 let 與 const 雖然在提升時期都會被建立，但是並沒有被初始化，這段期間也被稱做進入暫時死區 temporal dead zone。

函式宣告的提升

函式宣告式 Function declaration 的提升

函式宣告式指的是用 function 關鍵字宣告的有名函式。函式宣告式會被提升，所以可以在程式中的任一地方呼叫，如下方範例：

sayHi();
function sayHi(){
	console.log("Hi");
}​

這段程式的結果可以正確印出 "Hi" ，因為整個函式都被提升。

函式表達式 Function expression 的提升

另一種宣告函式的方法叫做函式表達式，意思是將函式賦值到宣告的變數。在這種宣告方式下，指有被宣告的變數會被提升，函式內容還停留在原地，因此會出現錯誤。

但是具體報錯的訊息會取決自接受的變數類型

sayHi();

var sayHi = function(){
    console.log("Hi");
}

以 var 的範例來說，會出現：

TypeError: sayHi is not a function

而將變數替換為 let/const 宣告，則會出現：

ReferenceError: Cannot access 'sayHi' before initialization

總結

JavaScript 在建立執行環境時會將變數、函數的宣告邏輯移到作用域頂端，這樣的情況稱作提升 Hoisting。

• 變數、函式的宣告都會有提升情況
• 只有宣告會提升，「賦值」不會被移動
• var 在提升時會初始化成 undefined
• let/const 不會初始化，會進入暫時死區 temporal dead zone
• 函式宣告式 function declaration 會被完整提升，函式表達式則只有宣告會被提升

參考

1. 什麼是提升 (Hoisting)？
2. 在 JavaScript 中用 var, let, 以及 const 有什麼差別？什麼時候該用哪個？
3. [筆記]-JavaScript 提升(Hoisting)是什麼?關於提升的5個觀念