iT邦幫忙

2022 iThome 鐵人賽

DAY 17
0
自我挑戰組

菜鳥的前端學習筆記系列 第 17

DAY17 - 函式

  • 分享至 

  • xImage
  •  

前言

剛學習時碰到函式可能會覺得有很多問號,但隨著不斷地嘗試及練習熟悉後,慢慢就會越來越理解這些內容 : )


函式

先來看一下函式的基本結構:

function addition(num_1, num_2) {
	return num_1 + num_2
}

console.log(addition(3, 5)) // 8

第一次看到函式會覺得好像有點看不懂,其實一樣可以用分解的方式先來認識他在做什麼:

  1. function:使用關鍵字來開頭,告訴程式接下來這塊區域內{}的內容都歸屬於這個函式(開領域的感覺)
  2. addition:為該函式的名字,為什麼function要取名呢?可以想像一下當你需要請同事幫忙做一件事情時,第一個步驟會需要做什麼呢?要叫對方名字(至少要喊聲欸)!當我們要使用這個函式時,同樣也需要呼叫他才能讓他知道我們要使用他囉!
  3. num_1及num_2:需要放入函式的參數(視情況需要也可以不放,但括號不能忘哦),一樣拿請同事幫忙來舉例,叫完同事後,要告訴他內容並將相關資料借給對方複製,參數就可以看做是交給對方複製的資料,如此對方才能夠複製資料進一步去執行我們需要他幫忙的內容。
  4. return:即這個函式預計回傳的內容,這邊可以看到return後面是num_1 + num_2,即是說明函式會將傳進來的兩個參數進行相加的動作再回傳結果(其實也就是同事完成你需要幫忙的內容後交還給你的意思)。
  5. console.log():既然有了return為什麼還是要console.log()才會輸出呢?因為return只是將值回傳給你(同事完成你需要幫忙的事情後會把完成資料還給你而不是直接交給主管),所以仍須使用console.log()來進行輸出內容。
  6. addition(3, 5):即為呼叫或調用函式,括號內的內容(3,5)稱為引數會為參數(num_1,num_2)賦值(如果很難理解的話,就當作是同事複製你的資料翻閱中,這樣他才能知道要如何進行處理)

為什麼需要函式?

最主要的原因在於函式封裝程式碼及需要時再呼叫的特性,其方便性極高,可以將會需要重覆使用的程式碼包裝起來,並置於需要使用的地方再呼叫就好。當我們需要處理的程式碼越發複雜時,越會需要更多拆解來完善我們的程式碼,這時候分裝好一個又一個的函式,也能夠讓自己或觀摩的人更清楚知道現階段的程式碼到底在進行或處理什麼事情(不然程式碼一多真的會寫到忘記東南西北)。


上一篇
DAY16 - 物件
下一篇
DAY18 - 繼續聊函式
系列文
菜鳥的前端學習筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言