JavaScript 語法基礎：程式區塊（Blocks）

簡介

在 JavaScript 中，**程式區塊（Block）**是用大括號 {} 包住的一段程式碼，代表「一個執行單位」或「一個作用域」。
區塊的存在讓我們可以把相關的敘述集中管理、控制執行流程，並且在 let、const 以及 class 等新語法中，形成 塊級作用域（block scope），避免變數汙染（pollution）與意外覆寫。

對於剛踏入前端開發的同學來說，理解區塊的行為是掌握條件判斷、迴圈、函式以及模組化程式設計的基礎；而對於已有經驗的開發者，善用區塊可以提升程式的可讀性、可維護性，並減少錯誤發生的機率。

核心概念

1. 區塊的基本語法

{
  // 這裡的程式碼屬於同一個 Block
  console.log('這是一個區塊');
}

大括號 {} 內的敘述會在 同一個執行上下文 中依序執行。
若區塊內沒有變數宣告或控制流程，等同於直接寫在外層。

2. 塊級作用域（Block Scope）

在 ES6 之前，var 只支援 函式作用域（function scope），導致在區塊內宣告的變數仍會洩漏到外層。
let 與 const 則會在區塊內產生獨立的作用域。

if (true) {
  var a = 10;      // a 仍在外層可見
  let b = 20;      // b 只在此區塊內可見
  const c = 30;    // c 只在此區塊內可見
}
console.log(a); // 10
// console.log(b); // ReferenceError: b is not defined
// console.log(c); // ReferenceError: c is not defined

重點：使用 let / const 可以避免「變數提升」與「作用域洩漏」的問題。

3. 控制流程中的區塊

條件判斷、迴圈與 switch 都會自動建立區塊，讓程式碼結構更清晰。

// if-else 區塊
if (score >= 60) {
  let status = '及格';
  console.log(status);
} else {
  let status = '不及格';
  console.log(status);
}

// for 迴圈區塊
for (let i = 0; i < 5; i++) {
  console.log(i); // i 只在此區塊內有效
}

4. 嵌套區塊與作用域鏈

區塊可以相互嵌套，形成 作用域鏈（Scope Chain），內層區塊可以存取外層的變數，但外層無法直接存取內層。

{
  const outer = '外層';
  {
    const inner = '內層';
    console.log(outer); // 可存取外層變數
    console.log(inner); // 可存取內層變數
  }
  // console.log(inner); // ReferenceError
}

5. 使用區塊建立臨時作用域（IIFE 的替代寫法）

在需要 一次性執行 且避免全域變數的情況下，可以直接利用區塊配合 let / const：

{
  const temp = Math.random();
  console.log('本次執行的隨機數：', temp);
}
// console.log(temp); // ReferenceError

這種寫法比傳統的 Immediately Invoked Function Expression (IIFE) 更簡潔，且不會產生額外的函式物件。

常見陷阱與最佳實踐

陷阱	說明	解決方式
`var` 仍在區塊內宣告	仍會提升到函式或全域作用域，導致意外覆寫。	優先使用 `let` / `const`。
區塊內未使用 `let` / `const`	變數會自動成為全域（嚴格模式下會拋錯）。	在 strict mode (`'use strict';`) 下開發，確保所有變數都有宣告。
`let` / `const` 重複宣告	同一區塊內不能重複宣告同名變數。	注意變數命名或使用不同的區塊層級。
`switch` 區塊未加 `{}`	`case` 之間會共享同一作用域，可能導致變數衝突。	在需要宣告變數的 `case` 中自行加上大括號。
`for` 迴圈中的閉包	若在迴圈內建立閉包，`var` 會導致所有閉包捕獲同一變數。	使用 `let` 替代 `var`，或在迴圈內建立 IIFE。

最佳實踐：

始終使用 let 或 const，除非確定需要 var 的函式作用域行為。
優先使用 const，只有在需要重新指派時才改用 let。
在條件與迴圈中加上明確的大括號，即使只有單行敘述，提升可讀性。
啟用嚴格模式（'use strict';），讓未宣告的變數直接錯誤，避免隱性全域。
適度利用區塊建立臨時作用域，保持全域命名空間乾淨。

實際應用場景

1. 表單驗證的暫時變數

在前端表單驗證時，我們常需要暫時儲存「錯誤訊息」或「檢查結果」：

function validate(form) {
  {
    const errors = [];
    if (!form.username) errors.push('使用者名稱不可為空');
    if (!/^\S+@\S+\.\S+$/.test(form.email)) errors.push('電子郵件格式錯誤');
    if (errors.length) return errors;
  } // errors 在此區塊外不可見，避免誤用
  // 其他驗證…
}

2. 動態產生 CSS 樣式的作用域

在單頁應用（SPA）中，常會根據使用者操作暫時產生樣式：

{
  const themeColor = '#ff6600';
  const style = document.createElement('style');
  style.textContent = `
    .temp-theme { background-color: ${themeColor}; }
  `;
  document.head.appendChild(style);
  // 之後若不需要此樣式，可直接移除
}

3. 渲染列表時的局部變數

使用 for...of 搭配區塊，讓每筆資料的處理保持獨立：

const items = ['蘋果', '香蕉', '橘子'];
for (const item of items) {
  {
    const upper = item.toUpperCase();
    console.log(`原始：${item}，大寫：${upper}`);
  }
}

總結

程式區塊是 JavaScript 形成結構化、可維護程式碼的根本單位。透過 {} 我們不僅能控制 執行流程，更能在 ES6 之後 以 let、const 建立 塊級作用域，有效防止變數洩漏與意外覆寫。

掌握以下要點，即可在開發中安全且高效地使用區塊：

使用 let / const 取代 var，讓變數僅在需要的區塊內可見。
在條件、迴圈、switch 中明確加上大括號，提升可讀性與安全性。
善用區塊作為臨時作用域，減少全域變數的產生。
遵守嚴格模式 以及 最佳實踐，讓程式錯誤更早被捕捉。

透過這些概念與技巧，你將能寫出 乾淨、易讀、避免常見錯誤 的 JavaScript 程式碼，為日後更複雜的功能開發奠定堅實基礎。祝你在 JavaScript 的旅程中，玩得開心、寫得順手！