JavaScript Function (函數)

函數 (function) 用來將會重複使用的程式碼封裝在一起,方便重複執行。

函數宣告 (Function declaration)

先來看看函數的宣告語法:

function functionName(parameter1, parameter2, ...) {
    // statements

    // return value;
}
  • 我們用 function 這個關鍵字來宣告一個函數
  • 緊接著是指定這個函數的名稱 functionName
  • 然後小括號 () 裡面指定這個函數的參數,可以用逗點 , 分隔多個參數
  • 最後在大括號 {} 裡面則是你想封裝在這個 function 的程式碼
  • 一個函數可以有返回值,使用 return 關鍵字來返回一個值

一個 function 如果不需要參數,小括號還是不能省略,寫成 function functionName() {}

一個 function 也可以沒有返回值,亦即省略 return 語句,預設會返回 undefined

例如,我們宣告一個計算平方的函數,叫它做 square:

function square(number) {
    return number * number;
}

square 有一個參數 number,這個簡單的函數只有一行程式碼,最後會回傳 number 的平方,作為這個函數的返回值。

呼叫函數 (Calling function)

宣告一個函數並不會自動的執行它,你要使用函式呼叫的語法,來呼叫並執行一個函數的內容。

函數呼叫語法 - 使用函數名稱加上 () 運算子來指定傳入的參數:

functionName(parameter1, parameter2, ...);

例如,你可以這樣呼叫上面定義好的 square 函數:

// 這樣會輸出 100
console.log(square(10));

// 可以將返回值存到一個變數
var squareValue = square(10);

// 函數呼叫的返回值,可以像變數一樣做操作
// 這樣會輸出 1000
console.log(square(10) * 10)

變數的存在範圍 (Function scope)

你在函數內定義的任何變數 (local variable),只有在函數裡面才可以存取到這個變數。

在函數裡面除了可以存取到局部變數 (local variable),也可以存取到全域變數 (global variable)

舉個例子:

// 全域變數 - global scope
var num1 = 20;
var num2 = 3;
var name = 'Mike';

// 這個函數定義全域空間 - global scope
function multiply() {
    // 函數內部可以存取到全域變數
    return num1 * num2;
}

// 輸出 60
console.log(multiply());

function getScore () {
    // 局部變數 - function scope
    // 作用範圍只在函數內部
    var num1 = 2;
    var num3 = 4;
    
    // 如果沒加 var 宣告變數,這個變數則是一個全域變數
    num2 = 5; // 存取到全域變數 num2
    num4 = 6; // 宣告一個新的全域變數 num4

    // 函數也可以宣告在其他函數內部 (nested function) - function scope
    function add() {
        // 內部函數可以存取到外部函數的局部變數
        return name + ' scored ' + (num1 + num2 + num3);
    }
  
    return add();
}

console.log(getScore()); //  "Mike scored 11"

// 會存取到全域變數 num1,輸出 20
console.log(num1);

// 會存取到全域變數 num2,輸出 5
// 因為全域變數 num2 在函數內部被設成 5
console.log(num2);

//會存取到全域變數 num4,輸出 6
console.log(num4);

// 全域空間存取不到 function 內部的變數
// 會發生錯誤 - Uncaught ReferenceError
console.log(num3);

// 全域空間也存取不到 function 的內部函數
// 會發生錯誤 - Uncaught ReferenceError
console.log(add());

函數表達式 (Function expression)

函數在 JavaScript 是一個一級物件 (first-class object),這意思就是一個函數可以當作別的函數的參數、函數的返回值、或做為一個變數的值。

所以你也可以用 Function expression 的方式來宣告一個函數,將一個匿名函數 (anonymous function / function literal) 當作值指定給一個變數。

例如:

var square = function(number) {
    return number * number;
};