JavaScript 中 var、let、const 的比較

在 JavaScript 中，`let`、`const` 和 `var` 都是用來聲明變數的關鍵字，但它們在 作用域（scope）、提升（hoisting） 和 可重新賦值性（reassignability） 等方面有明顯的差異。以下是詳細比較：

🔑 1. 聲明變數的關鍵字比較表

特性 `var` `let` `const`
作用域 函數作用域（Function） 區塊作用域（Block） 區塊作用域（Block）
是否提升 ✅（提升但不初始化） ✅（提升但不可用） ✅（提升但不可用）
可否重新賦值 ✅ ✅ ❌（不可重新賦值）
可否重複聲明 ✅（同一作用域內） ❌ ❌
是否綁定到全域 ✅（在全域時） ❌ ❌

🔍 2. 詳細解釋與範例

✅ `var`：ES5 的傳統方式

function test() {
  if (true) {
    var x = 10;
  }
  console.log(x); // 10，因為 x 屬於整個函數作用域
}

✅ `let`：ES6 引入的新聲明方式

function test() {
  if (true) {
    let x = 10;
  }
  console.log(x); // ReferenceError: x is not defined
}

✅ `const`：聲明常數（不可重新賦值）

const PI = 3.14;
PI = 3.14159; // TypeError: Assignment to constant variable.

注意：`const` 不代表「不可變物件」，僅代表「指向的記憶體位址不能改變」。

const obj = { name: 'Alice' };
obj.name = 'Bob'; // ✅ 合法，只是改變物件內容

🧠 3. 變數提升（Hoisting）

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

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

console.log(c); // ReferenceError: Cannot access 'c' before initialization
const c = 30;

✅ 總結建議