初學者指南：什麼是 JavaScript 變數提升（Hoisting）？

更新日期： 2024 年 10 月 14 日

在學習 JavaScript 的過程中，你可能會聽說過 變數提升（Hoisting） 這個概念。

變數提升是一個容易讓新手感到困惑但又非常重要的概念。

理解它可以幫助你更好地預測和理解程式的行為，避免一些常見的錯誤。

這篇文章將為你介紹什麼是變數提升，並用簡單的例子來解釋它的工作原理。

什麼是變數提升？

變數提升（Hoisting） 是 JavaScript 中的一個特性，指的是在程式執行前，變數和函數的宣告會被「提升」到它們所在範疇（scope）的最上方。

這意味著，即使你在程式碼中後面才宣告變數，JavaScript 會在背景中把宣告提升到範疇的頂端進行處理。

這個特性讓變數可以在宣告之前就被使用，但它可能會引起一些意想不到的行為，特別是對於初學者來說。

因此，了解變數提升是如何工作的至關重要。

變數提升的例子

讓我們來看一個例子來理解變數提升的概念：

console.log(myVar); // 輸出：undefined
var myVar = 10;

在這段程式碼中，我們在變數 myVar 宣告之前就試圖打印它的值。

你可能會認為這會產生錯誤，但實際上，程式輸出的是 undefined。

這是因為 JavaScript 在執行程式碼之前，會將 var myVar 的宣告部分提升到程式碼的最上方，而不包括賦值部分。

因此這段程式碼相當於：

var myVar;
console.log(myVar); // 輸出：undefined
myVar = 10;

這就是為什麼我們在使用變數前會看到 undefined，而不是報錯。

var、let 和 const 的提升行為

JavaScript 中有三種宣告變數的方式：var、let 和 const。

它們的提升行為略有不同。

var 的提升行為

使用 var 宣告的變數會被提升到範疇的頂端，並且初始值為 undefined。

這就是為什麼你可以在 var 宣告之前使用變數，而不會得到報錯，只會得到 undefined。

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

let 和 const 的提升行為

使用 let 和 const 宣告的變數也會被提升到範疇的頂端，但與 var 不同的是，它們不會被初始化。

因此，如果你在宣告之前使用 let 或 const，就會得到一個錯誤，稱為 參考錯誤（ReferenceError）。

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

這意味著，即使 let 和 const 也被提升，但它們進入了一個稱為 暫時性死區（Temporal Dead Zone, TDZ） 的狀態，直到變數宣告的那一行被執行之前，你不能訪問這些變數。

函數提升

除了變數，函數宣告 也會被提升。這意味著你可以在函數被定義之前就使用它。

greet(); // 輸出：Hello, World!

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

在這段程式碼中，函數 greet 被提升到程式碼的頂部，所以我們可以在它宣告之前調用它。

但是需要注意的是，函數表達式 不會被提升。

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

var sayHello = function() {
  console.log("Hello!");
};

這裡 sayHello 是一個函數表達式，它的變數宣告被提升了，但賦值並沒有被提升，因此在賦值之前它的值是 undefined，這會導致錯誤。

如何避免提升帶來的混淆

變數提升有時候會讓程式變得難以理解，特別是在大型項目中。

因此，以下是一些建議，幫助你避免因提升而引起的混淆：

1. 使用 let 和 const 而不是 var：let 和 const 不僅提供了更好的作用域控制，還能避免變數提升帶來的意外行為。
2. 在使用變數之前宣告它們：養成在變數使用前就宣告的習慣，可以讓程式碼更易讀且更可靠。
3. 保持代碼的結構清晰：盡量將變數和函數的宣告部分放在程式碼的開頭，這樣不僅可以更好地理解程式碼，還能減少因提升而導致的錯誤。

結論

變數提升（Hoisting） 是 JavaScript 中的一個特性，它會將變數和函數的宣告部分提升到範疇的最上方。

理解這個特性可以幫助你避免一些常見的錯誤，並讓你的程式碼更具可預測性。

在現代 JavaScript 開發中，建議使用 let 和 const 來代替 var，以減少變數提升帶來的困惑和問題。

希望這篇文章幫助你了解什麼是變數提升，以及如何在寫程式時正確處理這個概念。

如果你對 JavaScript 有更多的疑問，請繼續學習並實踐，這樣才能更好地掌握這門語言！