JavaScript 的變數置頂（Variable Hoisting）

變數置頂是 JavaScript 中的一個行為，它指的是變數和函式的宣告會在編譯階段被移到其所在作用域的最頂部。這個行為就像這些宣告被"提升"或"置頂"到了作用域的頂部，因此得名。

以下是變數置頂的幾個重要特點：

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

// 上面的程式碼等同於：
var x;
console.log(x);
x = 5;

var 宣告的變數會被置頂，但初始化不會。因此，變數可以在宣告之前使用，但值會是 undefined。

sayHello(); // 輸出："Hello!"

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

整個函式宣告都會被置頂，所以可以在宣告之前呼叫函式。

console.log(x); // 報錯：Cannot access 'x' before initialization
let x = 5;

技術上，let 和 const 也會被置頂，但它們不會像 var 那樣被初始化為 undefined。它們會進入一個"暫時性死區"，在那裡它們不能被存取。

sayHello(); // 報錯：sayHello is not a function

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

只有函式宣告會被置頂，函式表達式不會。

var x = 1;

function x() {
    console.log("I am a function");
}

console.log(typeof x); // 輸出："number"

函式宣告的置頂優先於變數宣告，但變數賦值會覆蓋函式宣告。

// 不好的做法
console.log(x);
var x = 5;

// 好的做法
var x;
console.log(x);
x = 5;

雖然變數置頂是 JavaScript 的一個特性，但在實際編程中，最好避免依賴它，因為這可能導致難以理解和維護的程式碼。

理解變數置頂對於避免 JavaScript 中的一些常見錯誤非常重要。它也解釋了為什麼許多 JavaScript 開發者推薦使用 let 和 const 而不是 var，因為它們可以幫助我們寫出更可預測的程式碼。

JavaScript