iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 7
2
Modern Web

JavaScript 初心者筆記系列 第 7

JavaScript 初心者筆記: 函式實際運作 - 回傳值與函式間互相傳遞

今天要分享的內容跟前面的觀念文比起來,程式碼比較多,畢竟標題是函式實際運作嘛。


回傳(return)的意義

函式可以透過 return 回傳函式運算完的結果,回傳的值可在函式外透過宣告變數來儲存;若函式不回傳值,則可省略 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))

這樣才叫做有回傳值。


函式篇結束,明天是陣列篇!


上一篇
JavaScript 初心者筆記: 函式實際操作 - 參數與數學運算
下一篇
JavaScript 初心者筆記: 陣列簡介
系列文
JavaScript 初心者筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言