JavaScript 是一種經常會讓新手感到困惑的語言。其中一種行為是提升，每個 JavaScript 開發人員都應該理解這個概念，以便編寫更可預測的程式碼。在本文中，我們將探討什麼是提升、它如何與變數和函數配合使用，以及如何避免與之相關的陷阱。

什麼是提升？

提升是指 JavaScript 將宣告（但不是初始化）移到其作用域頂部的預設行為。這發生在程式碼執行之前的編譯階段。這意味著您可以在程式碼中實際聲明變數和函數之前使用它們。

例子：

console.log(myVar); // undefined
var myVar = 5;

在此範例中，您可能會遇到 ReferenceError，因為 myVar 在聲明之前就被使用了。然而，由於提升，實際發生的情況是聲明 var myVar 被移動到其作用域的頂部，而賦值 (myVar = 5) 仍然保留在原位。在內部，JavaScript 將其解釋為：

var myVar;
console.log(myVar); // undefined
myVar = 5;

因此，console.log運行時myVar已定義但尚未賦值，這就是為什麼它輸出undefined。

提升與變數

讓我們分解一下提升如何處理不同類型的變數：var、let 和 const。

1. var 提升

對於 var，宣告和變數都會被提升。但是，僅移動了聲明，而不移動了賦值。

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

聲明 var a 被提升，但賦值稍後發生，因此 a 在記錄時未定義。

2. let 和 const 提升

用let和const宣告的變數也會被提升，但它們不會像var一樣被初始化為未定義。相反，它們從作用域開始處進入臨時死區 (TDZ)，直到遇到聲明為止。

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

此處，b 被提升，但在執行實際聲明行之前它不可用，導致引用錯誤。

同樣的行為適用於 const，但附加規則是 const 變數必須在宣告時初始化。

起重與功能

函數宣告被完全提升，這表示函數名稱和函數體都被移到作用域的頂端。這允許您在聲明函數之前調用函數。

函數宣告範例：

greet(); // "Hello, World!"

function greet() {
  console.log("Hello, World!");
}

這裡，函數宣告greet被完全提升，因此即使在程式碼到達其定義之前也可以呼叫該函數。

函數表達式與提升

但是，函數表達式的提升方式不同。由於它們被視為賦值，因此僅提升變數聲明，而不提升函數定義。

greet(); // TypeError: greet is not a function

var greet = function() {
  console.log("Hello, World!");
};

在這種情況下，變數greet被提升了，但是在提升過程中它被賦值為undefined。這就是為什麼在賦值之前呼叫greet()會拋出TypeError。

避免吊掛陷阱

為避免提升造成混亂，請遵循以下最佳實務：

1. 在其作用域的頂部聲明變數 – 儘管提升將聲明移動到頂部，但在各自作用域的開頭聲明它們是一個很好的做法。這使您的程式碼更具可讀性和可預測性。

2. 使用 let 和 const 而不是 var – 用 let 和 const 宣告的變數是區塊作用域的，這使得提升行為更清晰且更不容易出現錯誤。它還減少了在初始化之前意外引用變數的可能性。

3. 組織函數宣告 – 在使用函數之前宣告它們以避免依賴提升行為。

結論

提升是 JavaScript 的眾多怪癖之一，但了解它的工作原理可以幫助您編寫更清晰且不易出錯的程式碼。請記住，雖然函數宣告和變數都被提升，但它們的行為不同。堅持使用 let 和 const 而不是 var，並保持程式碼組織良好以避免意外。

透過注意提升，您可以讓 JavaScript 程式碼更可預測且更易於維護。