JavaScript 小學-function 函式

Jordan Tseng

Published in

JordanTTCDesign

5 min readNov 21, 2020

函式 function 就是可以把一個重複的動作先打包成一套動作，方便重複使用和維護。先來看看函式的基礎架構，有函式名稱、在()中的參數arguments 、最後{}中方入需要執行的動作。

注意：參數與參數之間可以用逗號 , 隔開，如沒有參數時也不能省略()。

function 名稱(參數) {
  //重複執行動作
}

一般函式有三種宣告方式，我都是使用前面兩個：

函式宣告式（Function Declaration）
函式運算式（Function Expressions）
透過 new Function 關鍵字建立函式

函式宣告式 Function Declaration

剛剛上面最先展示的就是函式宣告式，先建立一個 function()，而function 和 () 中間的是函式名稱，當然不加也可以，但是就是一個匿名函式了，最後把內容用{}包裹：

function greet(){
console.log("good morning~");
console.log("How do you do today");
}

建立好之後，如果要用它就需要呼叫它，就會執行❤️：

greet();

函式運算式（Function Expressions）

這種方式跟宣告函式很像，差別的部分其實可以當作是將一個匿名函式透過宣告變數指定給其變數。

var greet = function(){
console.log("good morning~");
console.log("How do you do today");
}

函式中的參數

剛剛提到function後面()可以帶入參數，參數的用途就是當作一個代名詞可以在函式內重複使用，並且可以透過呼叫函式時帶入不同參數來運作。我們舉例有一個函式是老師點名💁💁：

var callStudent = function(studentNumber,studentName){
console.log("good morning~");
console.log("How do you do today");
}

函式作用域

這是關於變數有效範圍的，在 ES6 之前最小單位是以 function 做分界的👍，用下面例子來看：

var callName = "帥哥";
var morningCall = function() {
  var callName = "美女";
  console.log( callName );//美女
};
console.log( callName );//帥哥

因為在函式 morningCall() 中重新宣告了一個 callName 變數，所以當我們執行 console.log( morningCall() ) 時其實是運行了morningCall()，那麼 return 的內就改成美女了。

而第二行的callName因為沒用到 morningCall() 函式，所以還是保持原本的全域變數帥哥。

而如果在函式內沒找到 callName 這個變數，就會往外尋找，那就找到帥哥，這時候才會是兩個都是美女。

return 是幹啥吃的？

前面舉的例子基本上是以執行函式為主，就是說呼叫時，執行完函式內的動作就沒事了。

而我們有時候是需要函式給我們一個結果，然後拿這結果再去做別的事情，而如果把全部的事情都包在一個函式中處理，也太亂太長，所以我們應該要用 return 把結果 pass 出來，也許再用別的函式，這是分工合作～

function double(number) {
    return number * 2
    var haha = number * 1234;//不會執行
    console.log(haha);//不會執行
}
var result = double(4)
console.log(result)//8

上面這段程式碼就是把函式 return 回傳的值可在函式外透過宣告變數來儲存。

注意 return 之後就會跳出函式了，所以 return 之後的所有程式碼都不會運作，都是屁～因此，用 return 回傳空值也具有「中止」程式碼的功能。