JavaScript 初學者教學：深入認識箭頭函式 Arrow Function

在 JavaScript 裡，函式除了可以像一般常見的寫法那樣定義，還能像資料一樣被存進變數裡使用。

這代表你可以先寫好一段功能，然後把它「綁定」到一個變數上，之後只要用那個變數名稱，就能呼叫這段功能。

這種寫法非常實用，特別是當你只需要簡單的一小段程式邏輯，或者想根據不同情況決定要執行什麼時，會讓你的程式變得更有彈性，也更容易管理。

舉個例子，我們可以這樣定義一個函式：

const sayHi = function() {
  console.log("Hi!");
};

這段程式碼的意思是：定義一個匿名函式，然後把它綁定到變數 sayHi 上。日後只要呼叫 sayHi()，就能執行這段功能。

這樣的寫法在 JavaScript 裡十分普遍，不過你可能會覺得：

寫個簡單函式怎麼這麼多字？能不能再短一點？

從 2015 年的 ECMAScript 6（ES6）開始，JavaScript 正式引入了一種專門用來簡化這類寫法的語法：
➡️ 箭頭函式（Arrow Function）

你可以這樣理解箭頭函式的角色：

✅ 箭頭函式 = 簡化版的函式值

也就是說，它不是一個全新的東西，而是對你已經學會的函式值的語法優化。

不但更簡短、更好閱讀，還額外提供一些特性（像是固定的 this 綁定），在實務開發中非常常見。

什麼是箭頭函式？

箭頭函式（Arrow Function）是用來定義函式的一種新語法，寫起來更短、看起來更直覺。

它用 =>（等號加大於符號）來取代傳統的 function 關鍵字，長得像一支箭頭，因此得名。

它最主要的設計目的就是讓你在撰寫簡短功能時，可以少打一點字、讓邏輯更聚焦，尤其適合寫在變數、回呼函式、陣列處理等場合。

⚠️ 小提醒：箭頭函式的 => 和你在比較大小時用的 >= 是完全不同的東西，不能混淆。

基本語法

const 函式名稱 = (參數) => {
  // 函式主體程式碼
};

• const：通常使用 const 來宣告箭頭函式，代表這個函式是一個不可重新指定的變數。
• (參數)：小括號內放入你希望函式接收的輸入參數。
• =>：箭頭符號，代表「輸入參數之後要執行的程式邏輯」。
• { ... }：函式主體，也就是這個函式實際上要執行的程式碼區塊。

範例說明

const power = (base, exponent) => {
  let result = 1;
  for (let count = 0; count < exponent; count++) {
    result *= base;
  }
  return result;
};

這段程式碼定義了一個名為 power 的箭頭函式，用來計算「base 的 exponent 次方」。

🧮 舉例執行：

power(2, 3); // 回傳 8，因為 2 * 2 * 2 = 8

🧾 解釋程式邏輯：

1. 傳入兩個參數：base（底數）與 exponent（次方數）。
2. 先設定 result = 1，作為初始值。
3. 使用 for 迴圈，讓 result 連續乘上 base，共乘 exponent 次。
4. 最後將結果回傳。

這樣的語法與傳統寫法功能相同，但使用箭頭函式可以讓整體看起來更簡潔，也更現代化。

語法結構說明

箭頭函式的寫法乍看之下有些陌生，但其實邏輯非常直白。可以拆解為以下三個核心部分：

函式名稱

通常我們會用 const 來宣告箭頭函式，因為這樣做可以保證函式不會在之後被重新賦值。

const sayHello = ...

參數列表

放在小括號中，用來接收呼叫函式時傳入的值。

如果有兩個以上的參數，就用逗號分隔：

(base, exponent) =>

如果只有一個參數，括號甚至可以省略（這會在後面章節說明）。

箭頭與函式主體

箭頭 => 的右側就是要執行的程式邏輯（也就是函式主體）。

主體若是多行，就用 {} 包起來，並明確使用 return 回傳結果。

=> {
  let result = 1;
  ...
  return result;
}

整體理解比喻

你可以把箭頭函式想像成這樣一種表達方式：

「給我這些輸入參數，我就會產生這個結果。」

就像數學中說的：
「f(x, y) = x + y」
在 JavaScript 中就可以寫成：

const add = (x, y) => x + y;

是不是很直覺？

簡化語法技巧：寫得更短、更快、更直覺

箭頭函式本身就是為了讓函式寫法更簡潔而設計的語法糖。

除了基本寫法外，JavaScript 還提供了一些進一步簡化的語法規則，讓你在撰寫簡單邏輯時，不需要寫太多不必要的字元。以下幾種情境最常見：

一個參數時，可省略括號

當箭頭函式只需要接收「一個參數」時，可以省略參數外層的小括號 ()，讓語法更簡單。

範例 1：

const square1 = (x) => {
  return x * x;
};

這段程式等同於：

const square2 = x => {
  return x * x;
};

只要參數是 單一變數名稱，就可以這樣寫。不過如果有多個參數，括號就不能省略。

範例 2（多個參數時）：

const multiply = (a, b) => a * b; // 括號不能省略

只有一行「回傳值」可省略 {} 與 return

如果函式的內容只有一行表達式（例如：計算值、回傳文字、邏輯運算等等），而且這個值就是你要回傳的結果，那麼你可以省略：

• 大括號 {}（不需要明確區塊）
• return 關鍵字（自動回傳這行的結果）

範例：

const double = n => n * 2;

等同於：

const double = n => {
  return n * 2;
};

這種寫法非常適合寫一些簡單的運算、文字處理、邏輯判斷等，像是：

const greet = name => `Hello, ${name}!`;
const isEven = n => n % 2 === 0;
const getLength = str => str.length;

📌 注意：只要使用 {}，你就必須手動寫上 return，否則函式不會回傳任何東西（會回傳 undefined）。

多行程式時，不可省略 {} 與 return

當函式內容需要執行多個步驟，例如宣告變數、條件判斷、寫多行邏輯等等，就不能省略大括號，也必須加上 return。

範例：

const calculateDiscount = (price) => {
  let discount = price > 1000 ? 0.2 : 0.1;
  return price * (1 - discount);
};

無參數時的箭頭函式寫法

有時候我們會寫一些不需要任何輸入參數的函式，例如觸發聲音、顯示訊息、初始化某些資料等。

在這種情況下，即使沒有參數，也必須寫上一組空括號 ()，代表「這個函式不接受任何參數」。

範例：

const horn = () => {
  console.log("Toot");
};

這段函式在被呼叫時，會印出 “Toot”。因為沒有參數，所以參數位置是一對空的 ()，這是箭頭函式的標準寫法格式。

🧠 小提醒：不能省略括號的情況

• 無參數：一定要寫 ()
• 多參數：一定要寫 (a, b)
• 帶預設值的參數：例如 (x = 0)
• 使用解構賦值參數：例如 ({ name }) => name.length

這些情況都不能省略括號，只能省略當你使用一個單純變數作為參數時。

小結

為什麼要使用箭頭函式？

箭頭函式並不是拿來「取代」傳統 function 的，而是提供開發者在某些情境下的更有效率、更語意化的選擇。

那它到底為什麼值得學？

原因 1：簡潔撰寫小型函式

你可以用更短的程式碼完成同樣的功能：

// before
function isPositive(n) {
  return n > 0;
}

// after
const isPositive = n => n > 0;

這在寫回呼函式或陣列處理時，特別有感。

原因 2：減少語法雜訊

使用箭頭函式可以讓重點更明顯，減少干擾閱讀的語法元素（如 function、return、{} 等）。

這對團隊開發、撰寫大型專案時，有助於提升可讀性與維護性。

原因 3：符合現代 JavaScript 程式風格

目前幾乎所有新的 JavaScript 教學、框架（如 React、Vue Composition API）或函式庫，都大量使用箭頭函式。

學會它，不僅讓你寫得更現代、風格一致，也有助於閱讀別人（或開源社群）所寫的程式碼。

結語

箭頭函式是一種語法簡潔又功能強大的函式定義方式，適合初學者從撰寫簡單的程式邏輯開始學習。

雖然它與傳統 function 寫法在某些情況下有行為上的差異（例如 this 綁定），但對於初學者來說，理解其語法與基本用法就已經非常有幫助。