iT邦幫忙

2023 iThome 鐵人賽

DAY 9
1
Software Development

再騙小心沒朋友🥵 用LIFF實作LINE整人工具系列 第 9

[Day9] 不懂JavaScript 只好等著被整😔 函數篇

  • 分享至 

  • xImage
  •  

我們在寫程式時,常常會遇到需要做重複動作的任務,為了避免每次都要浪費時間寫一樣的程式碼,就會使用函數 (Function) 把那段程式包住,之後再遇到一樣動作的任務時就可以直接使用函數,不需要再寫一堆一樣的程式碼。

JavaScript 函數的宣告

JavaScript 函數的宣告語法如下:

function functionName(parameter1, parameter2, ...) {
    // statements 
    // return value;
}
  • 宣告函數用 function 當作開頭 (宣告變數用 var 當開頭)
  • functionName 為該函數的名稱
  • parameter1,parameter2 是該函數裡面的參數,可省略,但()不可省略
  • {}內的區域可以放程式碼和回傳值(return value),回傳值是函式運算完的結果; return 是用來回傳函數值。如果函式不回傳值,可以省略 return,預設會回傳 undefined。

宣告一個兩數相加的函式

假設我要宣告一個名稱為add()的兩數加法函式,可以用以下這種寫法:

	var a = 2;
	var b = 3;	
	function add() {
    return a + b;
}
	alert(add());  // 顯示5

雖然使用 add()函式正確回傳了 a+b 的結果,但是每次呼叫 add()函式前都需要分別宣告 a、b 變數,非常麻煩。因此會將要傳入的值放在 add()函式的()內:

	function add(a,b) {
    return a + b;
}
	alert(add(2,3));  // 顯示5

這種寫法就可以省去預先宣告變數的麻煩,只要在呼叫函數時一起將變數放入該函式即可。

JavaScript 的全域變數與區域變數

  • 全域變數 (global variable)
    全域變數可以在程式中的任何地方被存取,不限於任何函式的內外。
  • 區域變數 (local variable)
    區域變數只能在所屬的函式中執行,如果在該函式外則無法存取區域變數。

在以下程式中,除了在 add() 函式中的 c 是區域變數,a、b 都是全域變數。執行下列程式,會出現Uncaught ReferenceError: c is not defined的錯誤訊息:

	var a = 4; 
	var b = 7;
	
	function add() {
	var c = 2;
    return a * b * c;
}
	alert(c);


因為變數 c 只能在 add() 函式內使用,當 add() 函式執行完後,記憶體只會保留其執行的結果,變數c 的部分則會被記憶體消除釋放掉,所以才會出現未定義 c 的錯誤訊息。
我們再把 alert 的內容換成 a*b,就會成功輸出 28,因為變數a、b是全域變數,在整個程式範圍內都認的到:

	var a = 4;
	var b = 7;
	
	function add() {
	var c = 2;
    return a * b * c;
}
	alert(a*b);

JavaScript 函式的呼叫順序

通常我們都會認為要先宣告函式,再去呼叫函式本身,程式才能順利運作。像 Python 語法中,如果先呼叫函式再宣告函式就會出現NameError的錯誤。但是在 JavaScript 中有一種特別的提升(Hoisting)現象,意思是會將變數和函式的宣告在編譯階段就被放到記憶體,所以才可以在程式碼宣告該函式之前使用它。

    var a = 4;
	var b = 7;
	alert(add());
	function add() {
	var c = 3;
    return a * b * c;
}


但如果是使用 Python 語言,就沒有這種特性了:

a = 4 
b = 7
add()

def add():
	c = 3
	print( a * b * c)


上一篇
[Day8] 不懂JavaScript 只好等著被整😔 變數篇
下一篇
[Day10] 不懂JavaScript 只好等著被整😔 流程控制篇 (1)
系列文
再騙小心沒朋友🥵 用LIFF實作LINE整人工具30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言