上一課： 第 15 課：可重用函式與內嵌重構 ｜ 下一課： 第 17 課：關鍵字與功能管理

第 16 課：環境與可見性 Scope 概念

課程摘要：本課將說明變數的「作用範圍（Scope）」與「生命週期」，了解 JavaScript 如何在不同環境中存取資料，是進入進階程式邏輯的基礎。

學習目標

1. 了解全域與區域變數的差異。
2. 能辨識變數在不同範圍中的可見性。
3. 理解函式作用域與區塊作用域（Block Scope）。

課程大綱

• Scope 的意義與重要性
• 全域變數與區域變數
• Block Scope 與 let/const 的特性
• 作用範圍鏈（Scope Chain）與變數解析順序

核心概念解說

在 JavaScript 中，變數能被存取與使用的範圍稱為「作用域（Scope）」。

let globalVar = "全域";

function testScope() {
  let localVar = "區域";
  console.log(globalVar); // 可存取
  console.log(localVar);  // 可存取
}

testScope();
console.log(globalVar);  // 可存取
// console.log(localVar); // ❌ 錯誤：localVar 未定義
  

區塊作用域（Block Scope）由 {} 定義，let 與 const 遵守此規則，而 var 不會。

if (true) {
  let a = 10;
  var b = 20;
}
console.log(b); // ✅ 可存取
// console.log(a); // ❌ 錯誤，a 只存在於區塊內
  

互動式範例

範例說明：觀察變數在不同範圍中是否能被正確讀取。

常見錯誤與除錯指南

• 在錯誤的範圍中呼叫變數，會出現 ReferenceError。
• var 宣告的變數在函式層級生效，而非區塊層級。
• 同名變數在內層作用域會覆蓋外層，但不會改變外層變數的值。

小測驗（附解析）

1. let 和 var 在作用範圍上有何不同？
   答案： let 受限於區塊作用域，而 var 只受限於函式作用域。
2. 為何避免在全域宣告過多變數？
   答案： 容易造成名稱衝突與維護困難。

複習與下一步

你已了解變數的可見性與作用範圍。 下一課將探討 「關鍵字與功能管理」， 學習如何控制程式執行邏輯與結構化管理。