Javascript Function 是什麼？這篇 Function 超入門是寫給初學者的介紹文，用簡單的幾分鐘一起圖解學習 function 的基礎吧！

HIHI～😍 如果你是第一次來的話，『Chan-Chan-Dev』是一個專門用簡單的圖文與故事講解網路程式技術的網站。
若你也喜歡用這種方式學習的話，歡迎加入 Chan-Chan-Dev Facebook 的粉絲團，在發佈的時候就有比較多機會收到通知喔！😍

閱讀對象

這篇是寫給當初新手小白剛學 Javascript 那個懵懵懂懂的自己，也希望能夠幫助新手階段想要學習 function 的你。

若已經是老司機的你（欸）… 還是可以快速看過啦！ 😆

那我們開始囉 😊

為什麼需要 function？

function (函數) 是 Javascript 最基本的程式組成區塊之一。

不過在繼續學習之前，我們用先來問一個很簡單的問題？

你今天早上有喝咖啡嗎？ 😆

OS：「屙？有阿，但跟 function 的關係是啥？🤣」

有的！其實我們已經默默地都在生活中使用 function 了，只是也許我們沒有意會到這件事情罷了！

讓我們想像一下，眼前有一臺『自動咖啡機』， 『泡咖啡』 需要經過哪些步驟才能作出一杯咖啡呢？

我們來看看 從自動咖啡機的角度，我們會怎麼作出那杯咖啡：

自動咖啡機泡咖啡

接受（被輸入） 裝入的咖啡豆
碾壓磨碎咖啡豆變成咖啡粉
用熱水沖泡剛剛完成的咖啡粉
將咖啡 輸出 到咖啡杯上

讓我們想像一下：

若 不能 使用『自動咖啡機』來幫我們執行上述這 4 個步驟的話，那我們的生活是不是會變得很不方便呢？每次當我們需要的時候，我們就得自己『手動』執行上述的步驟才能得到一杯咖啡 😵

因此 『泡咖啡』 本身就是代表著這些 『一組執行的步驟』，而有了 『自動咖啡機』 就可以讓我們省去每次都要自己執行這些步驟了

我們生活中充斥著各式各樣幫我們 執行的一組步驟 的工具，例如：吐司機、電鍋、微波爐等等 😀

什麼是 function？

function 就像是上述提到的 『自動咖啡機』 幫我們完成 一組需執行的步驟，當有需要的時候就可以 呼叫 『自動咖啡機』 來執行， 避免每次要執行這些步驟的時候，都要在重複寫一次（就像是讓我們不用每次都要自己在手動泡一次咖啡）。

輸入材料 → 執行運算 → 輸出結果

我們繼續回到自動咖啡機泡咖啡 的步驟：

輸入材料 接受（被輸入） 裝入的咖啡豆
執行運算 ✴ 碾壓磨碎咖啡豆變成咖啡粉
執行運算 ✴ 用熱水沖泡剛剛完成的咖啡粉
輸出結果將咖啡 輸出 到咖啡杯上

我們會發現自動咖啡機泡咖啡在執行的動作會經過輸入材料、執行運算、輸出結果這三個階段。

但一定必須要全部經過這些階段嗎？

其實只有 執行運算 的階段爲必須，而 輸入材料、輸出結果 則是非必須的狀態。

例如：

銀行櫃檯的號碼牌領取機，就只會經過 執行運算、輸出結果(號碼牌) 兩個階段，不需要輸入材料。
日本餐廳外的自動點餐機，就只會經過 輸入材料(錢、菜單)、執行運算 兩個階段，不需要輸出結果（不會馬上由機器完成餐點）。

宣告 function

我們剛剛提到的都是使用 ____ 完成 一組需執行的步驟，例如 『自動咖啡機』 完成 『泡咖啡』、『吐司機』 完成 『烤吐司』 等等。

那我們要怎麼自己定義這些步驟爲一個 function 呢？

我們試著用 Javascript 寫出上述的『自動咖啡機』function 吧！

以下的『自動咖啡機』function 程式碼是無法執行的！

只是一個說明範例喔 😆

命名

我們要替 function 命名，之後才能使用它，就如同『自動咖啡機』也是有名字的。

大部份的情況下 function 都會是以 『動詞』的形式命名，上述的『自動咖啡機』只是爲了好理解的比喻而使用名詞 😆

因此若以 function 的命名的情況下， 『泡咖啡 (makeCoffee)』 的命名是更適合的喔！

阿！對了，雖然 Javascript 的 function 命名支援中文，但是一般來說都是以 英文 命名喔 😀

function makeCoffee() {
   碾壓磨碎咖啡豆變成咖啡粉
   用熱水沖泡剛剛完成的咖啡粉
}

在 Javascript 宣告 function 時需要使用 function 這個關鍵字，並且用 () 放在 function 名稱後，並且將需要執行的步驟用一對 {} 包起來。

{} 包起來的一組需要執行的步驟，就是上述的 執行運算 階段。

參數（輸入）

我們已經完成基本的泡咖啡的 function 了！接下來我們要怎麼裝入咖啡豆(coffeeBean)呢？

我們會用參數的形式作爲輸入，參數也可以任意地命名，將需要輸入到這個 function 的材料塞在剛剛 function 名稱後的 () 裡面！

function makeCoffee(coffeeBean /* 輸入咖啡豆 */) {
   const coffeePowder /*咖啡粉*/ = 碾壓磨碎(coffeeBean);
   const coffee /*咖啡*/ = 熱水沖泡(coffeePowder);
}

順便一提參數可以有 0 到 N 個，不是只能有 1 個喔！😀

1
2
3

function fn(param1, param2, .... n) {
  ...
}

回傳（輸出）

我們在泡咖啡的 function 內已經得到咖啡了！但是我們要怎麼輸出呢？

在 Javascript function 需要回傳輸出時，需要使用 return 這個關鍵字，並且在return 後面加上要回傳的內容(不可以斷行喔)。

function makeCoffee(coffeeBean) {
   const coffeePowder /*咖啡粉*/ = 碾壓磨碎(coffeeBean);
   const coffee /*咖啡*/ = 熱水沖泡(coffeePowder);
   return coffee; // 回傳咖啡
}

相對於參數可以有 0 到 N 個，回傳值只能有 0 或 1 個喔！😀

function fn(param1, param2, .... n) {
  const sth = 123;
  return sth;
}

呼叫（執行）function

在完成 function 的宣告後，我們終於可以執行它啦！怎麼執行呢？就是要『呼叫 call』它！
若沒有參數的 function 完成宣告後，我們只需要使用 function 名稱 + ();

// 宣告 function
function fn(){
  // do something...
}

fn(); // 👈 呼叫（執行）function

若有參數的 function 的情況，我們只需要使用 function 名稱 + (參數);

function plus(num1, num2){
  return num1 + num2; // 此時的參數 num1 值爲 3, 參數 num2 值爲 5
}

plus(3, 5); // 👈 傳入參數 3 跟 5，呼叫（執行）function

我們簡單來看怎麼呼叫 makeCoffee 吧！

function makeCoffee(coffeeBean) {
   const coffeePowder = 碾壓磨碎(coffeeBean);  // 此時的參數 coffeeBean 值爲 "星巴克派克市場咖啡豆"
   const coffee = 熱水沖泡(coffeePowder);
   return coffee; // 回傳咖啡
}
makeCoffee("星巴克派克市場咖啡豆"); // 👈 傳入參數咖啡豆，呼叫（執行）makeCoffee

因爲我們有使用 return 回傳泡好的咖啡，也許我們需要用一個類似容器的變數來裝它，所以我們可以調整為：


function makeCoffee(coffeeBean) {
   const coffeePowder = 碾壓磨碎(coffeeBean);  // 此時的參數 coffeeBean 值爲 "星巴克派克市場咖啡豆"
   const coffee = 熱水沖泡(coffeePowder);
   return coffee; // 回傳咖啡
}

// 傳入參數咖啡豆，呼叫（執行）makeCoffee，並且用變數盛裝回傳泡好的咖啡
const coffee = makeCoffee("星巴克派克市場咖啡豆");

呼！還是有點抽象嗎？

我們用一張視覺想像流程圖來模擬這個 makeCoffee function 的執行過程吧 😆

有一點要注意的是：在呼叫執行 function 時，請記得要宣告 function 喔！
例如以下可能就會出現錯誤：

1	abc(); // 直接呼叫，卻沒有宣告 function

可執行 function 範例

上述都是解釋概念用的無法執行的程式碼，我們來簡單地撰寫真正的執行程式碼吧！

假設我們會計算好幾次的圓形面積，在我們還不會使用 Function 的時候可能會這麼寫：

const area1 = 3 * 3 * 3.1416;
const area2 = 9 * 9 * 3.1416;
const area3 = 6 * 6 * 3.1416;
const area4 = 2 * 2 * 3.1416;

若我們已經學會怎麼使用 function，我們可以爲計算圓形面積寫一個 function，參數可以接受傳入的圓半徑：

1
2
3

function getCircleArea(radius){
  return radius * radius * 3.1416;
}

因此上述的程式碼我們就可以調成爲：

const area1 = getCircleArea(3);
const area2 = getCircleArea(9);
const area3 = getCircleArea(6);
const area4 = getCircleArea(2);

若主管看到上述給你一個建議說：
『在 Javascript 裏面有一個叫做 Math.PI 的常數可以使用喔！』

建議你把 3.1416 調整為 Math.PI。

那我們只需要將 getCircleArea function 內的 3.1416 改成 Math.PI 就大功告成惹！

1
2
3

function getCircleArea(radius){
  return radius * radius * Math.PI;
}

對了！ 🤭

若 function 沒有 return 的關鍵字，what 變數是什麼內容呢？

function sayHi(){
  console.log("hihihihihi~");
}

const what = sayHi();
console.log(what);
// 答案是：  `undefined` 😆

若 function 有 return 關鍵字，後面卻沒有任何東西，what 變數是什麼內容呢？

function sayHi(){
  console.log("hihihihihi~");
  return;
}

const what = sayHi();
console.log(what);

// 還是 `undefined` 喔 😆

結論

這篇爲《 Javascript Function 超基礎入門》系列文的第一篇，簡單地講解了 Function 是什麼、為什麼需要 Function，以及 Function 的呼叫方法。

之後會再繼續跟大家聊聊 Function 的 Scope、Callback Function 等等的主題～😆

最後感謝你願意看到這裏，希望這篇文章對你有所幫助。

若你想到身邊有需要這篇文章內容的朋友，也請你幫他一個忙把這篇文章分享給他 😍

若文章的內容有錯誤的地方，也歡迎隨時一起討論交流。😘

最後感謝你的閱讀囉，我們下次見！Bye ～ 🚀

參考

MDN Functions

圈圈工程師

Javascript Function 超基礎入門！老司機勿入！