箭頭函式 在

關於 箭頭函式

除了函式宣告和函式運算式之外，JavaScript 還有一種更簡潔的定義函式語法。 這種函式稱為_箭頭函式_。

在這個概念裡，我們會聚焦在撰寫箭頭函式所用的語法。 箭頭函式的運作方式有一些差異，例如 this 綁定，這些會在其他概念中介紹。

以下是函式宣告與箭頭函式的比較。

function addUpTwoNumbers(num1, num2) {
  return num1 + num2;
}

// function keyword removed and => added
const addUpTwoNumbers = (num1, num2) => {
  return num1 + num2;
};

從上面可以看到，箭頭函式的語法：

1. 移除了關鍵字function
2. 將識別碼addUpTwoNumbers宣告為const
3. 加上一個粗箭頭=>

如果函式主體只包含一個回傳敘述，就像上面的例子那樣，就可以省略{}和return關鍵字。

const addUpTwoNumbers = (num1, num2) => { return num1 + num2 };

// can be shortened to
const addUpTwoNumbers = (num1, num2) => num1 + num2;
// braces {} and return removed

在箭頭函式只回傳物件的特殊情況下，物件外層需要加上括號，才能省略回傳敘述。

// explicit return of object
const addUpTwoNumbers = (num1, num2) => {
  return { num1, num2 };
};

// implicit return of object
const addUpTwoNumbers = (num1, num2) => ({ num1, num2 });

參數外層是否使用括號，取決於參數的數量。

// one parameter does not need parenthesis
const square = num => num * num;

// two or more parameters need to be wrapped in parenthesis
const addUpTwoNumbers = (num1, num2) => num1 + num2;

其他概念，例如其餘參數和解構，也可以搭配箭頭函式使用。