iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 7
1
自我挑戰組

花三十天找到 JavaScript 沙漠中的綠洲系列 第 7

07 函式

前言

我們昨天討論了 if 判斷式,在漢堡與薯條的例題中,遇到一個狀況:同樣都是 10 元漢堡和 20 元薯條,可能 A 客人買的數量跟 B 客人買的不同,要一直從頭寫大同小異的程式。

所以,今天就要跟大家介紹便利好幫手:函式 function 。那麼廢話不多說,讓我們開始吧!

函式是什麼?

正如同上面講的,函式是幫助我們節省時間的好幫手。一般來說有兩種函式,一種是出廠設定就內建在 JS 裡的, JS 已經幫妳寫好,只要按照規定使用即可,例如我們昨天提到的 alert 和 prompt 。另一種則是讓使用者自己創造、設計的函式。

創造函式的方式很簡單:為他取一個名字,讓他有地方放入不同的參數,並告訴他他的功能是什麼。函式有幾種定義方式:

  • 函式宣告
    最常見,寫法為 function 名稱(參數){指令};
  • 函式運算式
    寫法為變數名稱 = function(參數){指令};
    如果這裡的函式沒名字,又稱匿名函式。
  • 透過 new Function 關鍵字建立函式
    因為效率差比較少見,寫法為變數名稱 = new Function('參數','指令');

舉例來說,如果我們的漢堡固定 10 元,薯條 20 元,但顧客購買的數量可能不同,那麼我們的參數就可以設定為顧客購買的數量,而功能則可以設定為,幫我加好客人總共買了多少錢。以函式宣告的方式寫,會像下面的範例這樣:

const hamburgerPrice = 10; 
const friesPrice = 20; 

function totalPrice(hamburgerNum,friesNum){
  let total = (hamburgerPrice*hamburgerNum)+(friesPrice*friesNum);
  return "您好,您的總金額為"+total+"元";
};

console.log(totalPrice(1,0));
console.log(totalPrice(2,3));

前面一樣先宣告漢堡和薯條各多少,然後開始寫函式。我把這個函式取名為 totalPrice ,你當然也可以取其他的名字,只要容易辨識即可,命名規則與變數相同。

我的參數是漢堡與薯條的數量,要放在()裡面,用逗號隔開,一樣是可以客製化的取名。在{}裡要放這個函式的功能,最重要的當然就是算出總共多少錢囉!除了算出來之外,我還必須讓他顯示出計算結果才行。因此在這邊,我必須加上一個回傳值 return ,並在後面指示他要回傳的字串與變數。

最後,我可以用 console.log 測試一下功能是否正常。當我輸入console.log(totalPrice(1,0));,代表當我購買一個漢堡,零包薯條,總共是多少錢?電腦會跳出:您好,您的總金額為10元。

切記!如果要使用 console.log 回傳結果,一定要在 console.log 的括弧中加入函式的名稱。不然電腦不會通靈,不會知道你寫了一百個函式,是要他現在套用其中的哪一個函式啦!

如果改成函式運算式的寫法呢?

const hamburgerPrice = 10; 
const friesPrice = 20; 

let totalPrice = function (hamburgerNum,friesNum){
  let total = (hamburgerPrice*hamburgerNum)+(friesPrice*friesNum);
  return "您好,您的總金額為"+total+"元";
};

應該不難吧?

當然,不只可以使用 console.log ,我們也可以先在前面寫好函式,後面再使用它。例如我要寫一個函式讓電腦幫我加兩個數字,再跳出加完的結果,下面才去寫說我要加哪兩個數字。可以這樣做:

function add(n1,n2){
  alert(n1+n2);
};

add(1,2);

return 回傳值

在這裡我們先暫停一下,來討論什麼是回傳值。

回傳值代表函式已經結束,回傳到呼叫的意思。換句話說,如果我今天已經寫了 return ,但在他後面又接著寫其他的式子,那麼後面的式子不會被執行。

舉例來說,下面的函式不論是 total 還是 total2 都能得到答案,因為兩個都列在 return 前面。當我用 console.log 測試時,可以得到共買了 12 個物品 20 元的答案。

function totalPrice(a,b){
  let total = a+b;
  let total2 = a*b;
  return "您好,您買了"+total+"個物品,總金額為"+total2+"元";
};
console.log(totalPrice(10,2));

但如果我今天寫的是下面的程式,則會得到錯誤訊息 Cannot access 'total2' before initialization 。因為 total2 被放到 return 的後面了。

function totalPrice(a,b){
  let total = a+b;
  return "您好,您買了"+total+"個物品,總金額為"+total2+"元";
  let total2 = a*b;
};
console.log(totalPrice(10,2));

好!那如果我根本從頭到尾都沒提到 return ,會發生什麼事呢?

function totalPrice(a,b){
  let total = a+b;
  let total2 = a*b;
};
console.log(totalPrice(10,2));

你可以試著寫寫看,就會發現上面的程式,顯示出 undefined 。先講結論:在表達式中,必須要搭配使用 return 才能回傳數值。我的同學 AngusWu 說了一個我覺得很精準的形容:有寫 return 的函式可以當作數值,沒有寫的函式只能當成一個行為。

下面就讓我娓娓道來...

表達式、陳述式

是這樣的,程式分成兩種,一種會產生計算的結果,一種不會。舉例來說,宣告變數並不會產生計算結果,通常在執行環境及被執行,並且不能被放在預期會產生數值的地方。而運算(例如加減乘除)則會產生計算結果。

會產生結果值的程式碼,我們稱為表達式 Expression ,反之稱為陳述式 Statement 。

除了宣告變數之外, if 判斷式、 while for 迴圈、 switch 判斷式、 for-in 迴圈和直接的函式宣告,都算陳述式。

函式練習題

說了這麼多,終於要回來練習函式囉!讓我們一起來寫寫看這題吧:

漢堡 10 元,薯條 20 元,現在來了三個不同的客人。 A 的錢包有 200 元,買了兩個漢堡四包薯條。 B 的錢包有 150 元,買五包薯條。 C 的錢包有 100 元,買了兩個漢堡一包薯條。

請問,你要怎麼讓電腦用 JS 計算他們各剩下多少錢,並且秀出:「 A 買完東西後,剩下 XX 元」呢?提醒你,別忘了先確認一下有哪幾個參數喔。

想到了嗎?這題的答案就讓我們下次揭曉囉!晚安~ 我們明天見!

學習與參考資料

JS 學徒特訓班教學影片及練習題 10 關


上一篇
06 迴圈
下一篇
08 HTML DOM 、 .innerHTML 、 getElementById 、 getElementsByClassName 與 document.querySelector
系列文
花三十天找到 JavaScript 沙漠中的綠洲35

尚未有邦友留言

立即登入留言