今天要分享的內容跟前面的觀念文比起來,程式碼比較多,畢竟標題是函式實際運作嘛。
函式可以透過 return 回傳函式運算完的結果,回傳的值可在函式外透過宣告變數來儲存;若函式不回傳值,則可省略 return。 當 return 執行時,解譯器會跳出該函式,所以如果 return 後面還有程式碼,則不會被執行。因此,用 return 回傳空值也具有「中止」程式碼的功能。
在函式中使用 return,可以讓程式碼寫得較簡短,也可以拿來處理字串。只要直接讓函式代入參數,就能取代原本一行行的加減乘除。
例如下面這個名為 add 的函式,它會把傳入的兩個數字相加後並 return,所以下面的變數 result 會接收 add(15,45) 的結果,故 result 就會等於60。
function add(numOne,numTwo){
return numOne + numTwo;
}
var result = add(15,45);
// result 為 60
剛剛我們了解 return 的基本用法,那函式間如果需要互相傳遞各自運算出來的結果,要怎麼做呢?
先看一段比較簡單的程式碼:
// 設計一個含有參數的函式,用來回傳兩個數值相加的結果
function count(a, b) {
return a + b;
}
// 設計另一個函式,帶數字 1 跟 2 進去前一個函式計算總和,並用變數儲存回傳的值
function sum() {
var total = count(1,2);
console.log(total);
}
// 呼叫第二個函式,輸出變數 total 的值
sum();
// total 為 3
看完上面的範例,接下來我們試試看情境題:
function count(price){
return addTax(price*0.8);
} //(2)(3)
function addTax(price){
return price*1.1;
} //(4)
console.log(count(500)); //(1)
(1) 我們想要計算一件衣服的價格,所以呼叫 count 函式而衣服為 500 元。
(2) 在 count 函式中因為全館衣服打 8 折而先乘上 0.8。
(3) 但是因為要加收 10% 營業稅,所以把乘上 0.8 的價格再丟入 addTax 函式。
(4) 在 addTax 函式中因為要加收 10% 營業稅所以價格要乘上 1.1。(兩個函式中的 price 值是不一樣的,在 count 中指的是原價,在 addTax 中指得是打 8 折過後的價格)
(5) 等到 addTax 回傳結果後再回到 (1)。最後的售價為 440 元。
2019.9.9 補充
感謝胡立老師持續關注這個系列,在他的鐵人賽文章後設鐵人 Day4:請幫我簽個名好嗎?有對於回傳概念的額外補充,以下引用自該文章。
以我自己帶過新手的經驗,最容易搞混的就是 return 跟 console.log,分不清楚回傳跟印出到底差別在哪裡。尤其是 function 長這樣的時候:
function add(a, b) {
console.log(a + b)
}
add(1, 2)
有些新手會以為 add(1, 2) 的回傳值是 3,但不是,那是因為它在裡面 console.log() 所以把結果印出來了。如果真的要有回傳值的話要這樣寫:
function add(a, b) {
return a + b
}
console.log(add(1, 2))
這樣才叫做有回傳值。
函式篇結束,明天是陣列篇!