本文 AI 產出，尚未審核

JavaScript 語法基礎：語法結構（Syntax Basics）

簡介

在學習任何程式語言時，語法結構是最先必須掌握的基礎。對於 JavaScript 來說，熟悉語法不僅能讓程式碼更易讀、易維護，也能避免許多常見的錯誤與效能問題。即使是只負責前端 UI 的開發者，或是日後想要轉向 Node.js、React、Vue 等框架的同學，都必須對 JavaScript 的基本語法有扎實的概念，才能在更高階的主題上順利前進。

本篇文章針對 語法結構 進行系統性說明，從變數宣告、資料型別、控制流程到函式與物件的寫法，都會提供實務範例與解說。文章以 淺顯易懂 為原則，適合剛入門的初學者，也能為已有一定經驗的開發者提供一次完整的概念回顧。

核心概念

1️⃣ 變數宣告與作用域

JavaScript 在 ES6 以前主要使用 var，但 let 與 const 的出現解決了 變數提升 與 作用域混淆 的問題。

// 使用 var：會提升 (hoisting) 且作用域為函式
function varExample() {
  console.log(a); // undefined，因為宣告被提升
  var a = 10;
}

// 使用 let：不會提升，僅在區塊內有效
{
  // console.log(b); // ReferenceError: b is not defined
  let b = 20;
}

// 使用 const：宣告後不可重新指派
const PI = 3.1416;
// PI = 3; // TypeError: Assignment to constant variable.

重點

  • let、const 只在所在的區塊 (block) 內有效，避免了 var 的函式作用域問題。
  • const 必須在宣告時賦值，且指向的記憶體位置不可變，但物件內容仍可修改（參考下節）。

2️⃣ 基本資料型別與字面值

JavaScript 有七大基本型別：Number、String、Boolean、BigInt、Symbol、undefined、null。以下示範常見的字面值寫法與型別判斷。

// 數值
let intNum = 42;          // 整數
let floatNum = 3.14;      // 浮點數
let bigIntNum = 12345678901234567890n; // BigInt

// 字串
let singleQuote = 'Hello';
let doubleQuote = "World";
let template = `模板字串：${singleQuote} ${doubleQuote}`; // 支援插值

// 布林值
let isReady = true;
let isDone = false;

// 特殊值
let nothing = null;       // 明確表示「無值」
let notDefined;           // 未宣告即為 undefined

// 型別檢查
console.log(typeof intNum);      // "number"
console.log(typeof bigIntNum);   // "bigint"
console.log(typeof template);    // "string"

小技巧

  • 使用 模板字串 (```) 可以直接插入變數，避免繁雜的字串連接。
  • null 與 undefined 雖然都代表「沒有值」，但 語意不同：null 是開發者主動設定，undefined 多半是系統自動產生。

3️⃣ 控制流程（條件與迴圈）

條件判斷與迴圈是程式的核心控制結構。以下示例展示 if / else、switch、for、while 與 for...of 的寫法。

// if / else
let score = 85;
if (score >= 90) {
  console.log('A');
} else if (score >= 80) {
  console.log('B');
} else {
  console.log('C');
}

// switch（適合多分支且值為固定常數時使用）
let fruit = 'apple';
switch (fruit) {
  case 'apple':
    console.log('蘋果');
    break;
  case 'banana':
    console.log('香蕉');
    break;
  default:
    console.log('其他水果');
}

// for 迴圈（傳統寫法）
for (let i = 0; i < 5; i++) {
  console.log(`第 ${i + 1} 次`);
}

// while 迴圈
let n = 0;
while (n < 3) {
  console.log(`while ${n}`);
  n++;
}

// for...of（遍歷可迭代物件，如陣列、字串、Set）
const colors = ['red', 'green', 'blue'];
for (const color of colors) {
  console.log(`顏色：${color}`);
}

注意

  • switch 必須配合 break，否則會發生 fall‑through（跌入下一個 case）。
  • for...of 只能遍歷 可迭代 的物件，若要遍歷物件的鍵值，請使用 for...in 或 Object.entries()。

4️⃣ 函式宣告與箭頭函式

函式是 JavaScript 最重要的抽象單位。從傳統函式到 ES6 的 箭頭函式，語法與 this 行為都有所不同。

// 傳統函式宣告
function add(a, b) {
  return a + b;
}

// 函式表達式（匿名函式）
const multiply = function (a, b) {
  return a * b;
};

// 箭頭函式（簡潔寫法，無 own this）
const divide = (a, b) => a / b;

// 若只有一個參數，可省略括號
const square = x => x * x;

// 多行程式碼需使用大括號與 return
const sumArray = arr => {
  let total = 0;
  for (const num of arr) total += num;
  return total;
};

關鍵差異

  • this 綁定：傳統函式的 this 會根據呼叫方式動態決定；箭頭函式則會捕獲外層作用域的 this，常用於 回呼 (callback) 中避免 this 失效。
  • arguments 物件：箭頭函式沒有自己的 arguments，若需要可使用 剩餘參數 (...args)。

5️⃣ 物件與陣列的字面量

JavaScript 使用 字面量 直接建立物件與陣列，語法簡潔且易讀。以下示例展示屬性簡寫、計算屬性名稱與解構賦值。

// 物件字面量
const name = 'Alice';
const age = 30;

// 屬性簡寫（屬性名稱與變數同名時可省略）
const person = {
  name,
  age,
  // 計算屬性名稱
  ['full' + 'Name']: `${name} Smith`,
  // 方法簡寫
  greet() {
    console.log(`Hi, 我是 ${this.name}`);
  }
};

person.greet(); // Hi, 我是 Alice

// 陣列字面量與解構
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers; // 解構賦值

console.log(first);   // 1
console.log(rest);    // [3,4,5]

// 物件解構 + 預設值
const { fullName = 'Anonymous', greet: sayHello } = person;
console.log(fullName); // Alice Smith
sayHello();            // Hi, 我是 Alice

實務建議

  • 使用 屬性簡寫、方法簡寫 能讓程式碼更具表現力。
  • 解構賦值 不僅能一次取出多個值，還能配合預設值避免 undefined 帶來的錯誤。

常見陷阱與最佳實踐

陷阱 可能的結果 建議的寫法
使用 var 造成變數提升 變數在宣告前已被使用，得到 undefined 或意外值 盡量改用 let / const
== 與 === 混用 == 會自動類型轉換，導致不易察覺的錯誤 統一使用 ===（嚴格相等），除非確定需要類型轉換
忘記 break 的 switch 會執行到下一個 case，產生錯誤邏輯 在每個 case 後加 break，或使用 return / throw
箭頭函式裡的 this 期待的 this 為 undefined 或全域物件 確認是否真的需要箭頭函式；若需要動態 this，使用傳統函式
陣列或物件的淺層拷貝 修改新變數時會影響原始資料（引用問題） 使用 展開運算子 (...) 或 Object.assign() 進行深拷貝（必要時使用 structuredClone）

最佳實踐

  1. 宣告變數時盡量使用 const，只有在需要重新賦值時才使用 let。
  2. 嚴格模式 ('use strict';) 能幫助捕捉隱蔽錯誤，建議在模組或函式最前面加入。
  3. 使用 ESLint 配合 eslint-config-airbnb 或 eslint-config-prettier，保持程式碼風格一致。
  4. 避免在迴圈內建立大量函式，若必須，考慮將函式抽離或使用 forEach、map 等陣列方法提升可讀性。

實際應用場景

場景 需要的語法結構 範例說明
表單驗證 變數宣告、條件判斷、正則表達式 使用 if / else 檢查使用者輸入，若不符合條件即時回饋
動態渲染列表 陣列迭代 (for...of、map)、模板字串 取得 API 回傳的陣列，利用 map 產生 HTML 片段
計算機功能 函式、箭頭函式、switch 依照運算子切換不同的計算方式，回傳結果
狀態管理 物件解構、const、展開運算子 在 React/Vue 中使用 useState 或 data，透過解構取得子屬性
異步請求 函式、箭頭函式、async/await（語法層面） 使用 fetch 取得資料，await 內部的回呼仍依賴箭頭函式的 this 行為

小提醒：在上述案例中，若要把程式碼寫得更具可維護性，模組化 (ES6 import / export) 與 單元測試 (Jest、Mocha) 同樣重要，但它們屬於更進階的主題，這裡僅先鋪陳語法基礎。

總結

JavaScript 的 語法結構 看似簡單，卻是日後開發大型應用、撰寫乾淨可讀程式碼的根基。透過本篇的 變數宣告、資料型別、控制流程、函式與物件 等核心概念，配合 實務範例、常見陷阱 與 最佳實踐，讀者應能：

  1. 正確選擇 let / const，避免變數提升與作用域混亂。
  2. 熟練使用 模板字串、解構賦值，提升程式碼的表達力。
  3. 依需求選擇傳統函式或 箭頭函式，掌握 this 行為差異。
  4. 透過 switch、for...of、map 等語法，快速完成條件分支與資料迭代。
  5. 在開發過程中主動防範常見錯誤，養成 嚴格模式、ESLint 等工具輔助的好習慣。

掌握了這些語法基礎，未來無論是前端框架、Node.js 後端，或是跨平台的 React Native、Electron，都能更順暢地上手與擴展。祝大家 寫程式快快樂樂、寫出乾淨的程式碼！ 🚀