アロー関数 の

アロー関数について

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文だけが含まれている場合、波括弧（{}）とreturnキーワードは省略できます。

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

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

アロー関数からオブジェクトだけを返す特別な場合には、return文を省略できるようにするために、オブジェクトを括弧（()）で囲む必要があります。

// 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;

残余引数や分割代入などのほかの概念も、アロー関数と一緒に使うことができます。