JavaScript Function (函數)

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

函數宣告 (Function declaration)

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

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

    // return value;
}

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

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

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

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

呼叫函數 (Calling function)

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

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

functionName(parameter1, parameter2, ...);

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

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

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

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

變數的存在範圍 (Function scope)

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

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

舉個例子：

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

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

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

function getScore() {
  // 局部變數 - function scope
  // 作用範圍只在函數內部
  let num1 = 2;
  const 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) 當作值指定給一個變數。

例如：

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

箭頭函式 (Arrow Function)

在 ES6 (ES2015) 之後，我們可以使用更簡短的語法「箭頭函式=>」來宣告函式：

const square = (number) => {
  return number * number;
};

// 如果只有一行回傳語句，還可以省略大括號和 return
const square = (number) => number * number;

箭頭函式不僅語法簡潔，在 this 的綁定行為上也與傳統函式不同，詳細可以參考 ES6 Arrow Function。