JavaScript 初學者教學：認識函式（Function）

在學習 JavaScript 程式語言的過程中，函式（function） 是不可或缺的重要基礎。

它就像程式世界中的積木，讓我們可以把複雜的程式碼切割成一塊塊小單元，方便管理與重複使用。

本文將帶你從函式的概念開始，逐步認識函式的定義、用法、範例以及 return 的行為，幫助你打好程式設計的基礎。

什麼是函式？

函式的概念

在寫程式的時候，你會發現很多邏輯需要重複使用，或者程式碼越寫越多，變得不好讀、不好管理。

這時候，函式（function） 就派上用場了。

函式可以想成是程式裡的一個小工具。你先把某段程式碼包在函式裡，之後每次想用的時候，只要「呼叫」它就行，不用重寫一遍。

它就像：

• 一段事先寫好的指令清單，可以重複執行
• 一個名字，代表某個功能或運算
• 一個幫助程式碼更有結構、更乾淨的單位

簡單來說，函式的目的是讓程式更好維護、更好讀，也讓我們不用重複寫一樣的程式碼。

為什麼程式一定要用函式？

我們平常用語言講話，有成千上萬的詞可以用，每個詞都有特定意思。

但程式語言本身「字彙」很少（想像一套程式語言可能只有幾百個關鍵字或語法），要靠我們自己組合出想要的功能。

函式就是我們用這些基本語法去「組字造詞」的方法。

用函式有幾個好處：

• 可以用簡單的名字代表一段複雜邏輯，讓程式更容易看懂。
• 如果某段邏輯要修改，只要改函式裡的程式碼，不用到處找重複的程式碼來改。
• 可以把程式分成不同小單元，各自獨立，互不影響。主程式就像總指揮，只需要呼叫不同函式就好。

比方說，如果你有一段程式要計算某數字的平方，你可以寫成函式，之後只要呼叫它，不管要算幾次，都不用重寫邏輯。

函式的定義

在程式語言中，定義函式 的意思是：

「先寫好一段程式碼，取個名字，以後只要叫這個名字，程式就會執行這段邏輯。」

這麼做的好處是：

✅ 可以把一段重複的動作或計算包成一個單位，以後要用直接呼叫就好。
✅ 讓程式碼變整齊，不會重複寫一樣的邏輯。
✅ 程式變大時比較好維護，只要改函式裡的程式碼，所有呼叫它的地方都會跟著更新。

為什麼要用函式？

假設你要計算數字平方（數字乘以自己），如果不用函式，你可能會寫成：

console.log(12 * 12);
console.log(5 * 5);
console.log(8 * 8);

但如果哪天需求變了，要改成三次方，你就得每一行都去改，很麻煩又容易出錯。

如果你用函式，就只需要改一個地方，呼叫它的地方不用動，省事又乾淨。

函式表達式是什麼？

在 JavaScript 裡，函式是一種「值」，就像數字、字串一樣。

我們可以用 函式表達式（function expression） 的方式建立函式，把它存進變數裡，之後用這個變數名稱呼叫它。

函式表達式的重點是：

➡ 它是一個表達式產生了一個函式值。
➡ 這個函式值就像數字或字串一樣，可以被存進變數、傳給別人、放進物件或陣列裡。

它的語法會包含 function 關鍵字，但函式表達式的重點不是「只因為有 function」，而是這整個表達式產生出了一個函式值。

例如：

const square = function(x) {
  return x * x;
};

這裡發生了什麼？

這整個 function(x) { return x * x; } 就是一個函式表達式，整個表達式的值是一個函式。

怎麼呼叫函式？

函式表達式建立好之後，你可以用變數名加小括號來呼叫它：

console.log(square(12));  
// → 144

呼叫流程：

1️⃣ 把 12 傳進函式，變成 x = 12。
2️⃣ 執行函式裡的程式碼：return 12 * 12。
3️⃣ 計算出 144，回傳給呼叫的地方。
4️⃣ console.log 印出結果。

你也可以用它算其他數字：

console.log(square(5));  
// → 25

console.log(square(8));  
// → 64

函式表達式的特色

✅ 函式是一種值

函式表達式會產生出一個函式值，這個值可以像數字、字串一樣被賦值、傳遞、存放。

✅ 可以賦值給變數

在例子裡，我們把函式值存進變數 square。之後呼叫 square 就等於執行這個函式。

✅ 匿名函式很常見

函式表達式裡的函式通常不取名字，因為名字已經由變數名稱決定了。

✅ 只有在定義後才能用

因為是表達式的值，它必須等變數被賦值完成後才能呼叫。

初學者常見錯誤

❌ 呼叫時忘記小括號，例如寫成：

console.log(square);  
// 這樣只是把函式值印出來，不會執行它

❌ 定義好函式但沒呼叫它，程式什麼事都沒發生。

❌ 呼叫時參數沒給齊，導致運算結果不對。

函式的組成與參數

在寫程式時，我們常常需要函式來幫我們完成一個任務。

那麼，一個函式是由什麼組成的呢？

函式的組成

函式大致上包含兩個主要部分：

1️⃣ 參數（parameter）

參數就像函式的「輸入管道」。當你呼叫函式時，可以把資料（也叫「引數 argument」）傳進來。函式裡的程式碼可以用這些資料來計算或執行任務。

👉 參數只是一個名字，它代表呼叫時給函式的那個值。

2️⃣ 程式碼主體

這是函式裡要執行的指令，也就是函式真正要做的事。主體裡的程式碼一定要放在大括號 {} 裡面。當你呼叫函式時，程式就會去執行這段主體裡的程式碼。

例如：

const greet = function(name) {
  console.log("Hello, " + name + "!");
};

在這裡：

• name 是參數，代表你呼叫函式時要傳進來的資料。
• 大括號裡的程式碼是程式碼主體，它會印出一段問候語。

函式可以有幾個參數？

函式的參數數量是自由的，你可以根據需要決定。

✅ 沒有參數的函式

有時候，函式不需要任何外部資料，只是單純執行某個動作。這時候就可以不寫參數。

範例：

const makeNoise = function() {
  console.log("Pling!");
};

makeNoise();
// → Pling!

這個函式沒有參數，每次呼叫時，它都會做一樣的事（印出「Pling!」），不需要額外輸入。

✅ 單一參數的函式

如果函式只需要一個資料作為輸入，可以定義一個參數。

範例：

const square = function(x) {
  return x * x;
};

console.log(square(4));
// → 16

這裡 x 是參數，呼叫時傳入的值（例如 4）會代入 x，程式主體就可以用它來運算。

✅ 多個參數的函式

當函式需要兩個或更多資料來完成任務時，你可以列出多個參數，用逗號分隔。

範例：

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

console.log(power(2, 10));
// → 1024

這裡：

• base 是要計算的基數。
• exponent 是次方數。
• 呼叫 power(2, 10) 就是算 2 的 10 次方。

呼叫函式時參數怎麼運作？

當你呼叫函式時：

• 你在小括號裡放的值（這叫「引數 argument」）會依順序傳給函式的參數。
• 函式主體裡的程式就可以用這些值去運算或執行任務。

例如：

power(2, 3);

這裡：

• 2 傳給 base
• 3 傳給 exponent
• 函式主體裡的程式會用這兩個值去計算。

參數沒有值的情況

如果你定義了參數但呼叫時沒傳值，該參數的值會是 undefined。

例如：

const greet = function(name) {
  console.log("Hello, " + name + "!");
};

greet();
// → Hello, undefined!

因為沒有傳值進來，所以 name 是 undefined。

函式的 return 與回傳值

當我們呼叫一個函式時，程式會去執行函式裡的程式碼。

那麼，函式執行完之後，會傳回什麼結果呢？這就跟 return 有關。

函式是否會產生值？

每個函式在被呼叫時，最後都會「傳回一個結果」。

這個結果就是所謂的 回傳值（return value）。

函式的回傳值有兩種情況：

✅ 函式有明確回傳值

它用 return 回傳一個值，程式的其他地方可以接住這個值去運算、輸出或存進變數。

例如：

const square = function(x) {
  return x * x;
};

console.log(square(5));
// → 25

這裡，square(5) 回傳了 25，console.log 印出它。

✅ 函式沒有回傳值，只執行副作用

有些函式不需要回傳資料，只是做一件事，例如印出訊息或改變某些東西。

例如：

const makeNoise = function() {
  console.log("Pling!");
};

makeNoise();
// → Pling!

這個函式沒有回傳任何值，它只是印了一段話。

return 的角色

return 是函式裡很重要的指令，它的功能有兩個：

1️⃣ 決定函式的回傳值

當程式執行到 return，它會計算 return 後面的表達式，把那個結果當作回傳值。

2️⃣ 結束函式的執行

return 一出現，函式裡後面的程式碼就不會再執行了，程式會直接跳出函式，回到呼叫它的地方。

如果沒有寫 return 呢？

如果函式裡沒有寫 return，或是寫了但後面沒有表達式，函式會回傳 undefined。

範例

const sayHello = function() {
  return "Hello!";
};

console.log(sayHello());
// → Hello!

這裡函式有用 return 回傳字串 "Hello!"，所以 console.log 印出它。

const sayNothing = function() {
  return;
};

console.log(sayNothing());
// → undefined

這裡雖然有 return，但後面沒東西，所以函式回傳 undefined。

const doNothing = function() {
  // 完全沒有 return
};

console.log(doNothing());
// → undefined

這種情況一樣，因為沒有寫 return，所以函式回傳 undefined。

為什麼回傳值重要？

函式的回傳值就像它的「輸出」。

其他程式可以接住這個輸出繼續用下去。

舉例：

const double = function(x) {
  return x * 2;
};

const result = double(4);
console.log(result);
// → 8

這裡 double(4) 回傳了 8，我們把它存進變數 result，再印出它。

如果函式沒有回傳值，通常就是它只負責執行某個副作用（例如印字、改變畫面）。

小提醒：return 的常見錯誤

❌ return 後面的分號或換行問題

如果你寫成：

return 
"Hello!";

JavaScript 會把 return 視為單獨一行（自動幫你加分號），所以回傳的是 undefined，而不是 "Hello!"。

正確寫法：

return "Hello!";

或：

return (
  "Hello!"
);

❌ 以為 console.log 等於回傳值

有些新手會混淆 console.log 跟回傳值：

console.log 是印出東西，不是函式的回傳值。

函式回傳值是看 return 的結果，不是看它有沒有印東西。

參數與變數的關係

當你定義一個函式時，你可以在函式的括號裡寫「參數（parameter）」。

這些參數就像是函式內部的變數，用來接收你呼叫函式時傳進來的資料（也就是 引數 argument）。

參數就像函式裡的變數

在函式裡，參數的行為跟你在程式其他地方用 let 或 const 宣告的變數幾乎一樣：

✅ 它們可以被函式內部程式碼存取和使用

你可以用參數來做運算、組字串、或當成條件判斷的依據。

✅ 參數有初始值

這個初始值就是你呼叫函式時傳進來的引數。

✅ 參數的值只在函式內有效

參數只屬於該函式，函式外面是看不到這些參數的。

呼叫函式時，參數怎麼得到值？

當你呼叫函式時，你在小括號裡放的資料，會按順序傳給參數。

例如：

const greet = function(name) {
  console.log("Hello, " + name + "!");
};

greet("Alice");
// → Hello, Alice!

這裡：

• name 是函式的參數，就像函式裡的變數。
• 當你呼叫 greet("Alice") 時，"Alice" 這個引數會被傳進來，變成 name = "Alice"。
• 然後程式用這個參數去組字串並印出來。

參數也可以像變數一樣被重新賦值

在函式主體裡，你可以改變參數的值（雖然一般情況下不推薦這麼做，因為可能會讓程式不好讀）：

const double = function(x) {
  x = x * 2;
  return x;
};

console.log(double(5));
// → 10

這裡我們直接改變了 x 的值。

多個參數怎麼對應？

如果函式有多個參數，傳進去的值會按順序對應：

const introduce = function(name, age) {
  console.log("My name is " + name + " and I am " + age + " years old.");
};

introduce("Bob", 30);
// → My name is Bob and I am 30 years old.

• 第一個引數 Bob 對應到 name
• 第二個引數 30 對應到 age

如果沒傳引數進來？

如果你定義了參數，但呼叫函式時沒傳引數進來，參數會是 undefined：

const greet = function(name) {
  console.log("Hello, " + name + "!");
};

greet();
// → Hello, undefined!

這也是為什麼在實務中，常會搭配參數預設值（這可以在進階時再說明）。

參數與變數的相同與不同

結語

透過本篇文章，你學會了 JavaScript 函式的基本概念、語法、參數使用與回傳值的運作方式。

建議初學者可以多練習撰寫各種不同的函式，像是計算數值、輸出訊息或處理資料的函式，以累積對函式設計與使用的熟悉度。

當你能靈活運用函式時，你的程式將會更加簡潔、有條理且具可維護性。