アロー関数、基本

関数式よりも優れた、シンプルで簡潔な関数の作成構文があります。

これは「アロー関数」と呼ばれ、次のようになります。

let func = (arg1, arg2, ..., argN) => expression;

これは、引数 arg1..argN を受け取り、右側にある expression をそれらを使用して評価し、その結果を返す関数 func を作成します。

言い換えれば、これは以下の短いバージョンです。

let func = function(arg1, arg2, ..., argN) {
  return expression;
};

具体的な例を見てみましょう。

let sum = (a, b) => a + b;

/* This arrow function is a shorter form of:

let sum = function(a, b) {
  return a + b;
};
*/

alert( sum(1, 2) ); // 3

ご覧のとおり、(a, b) => a + b は、a と b という名前の2つの引数を受け取る関数を意味します。実行時に、式 a + b を評価し、結果を返します。

• 引数が1つだけの場合は、パラメータを囲む括弧を省略して、さらに短くすることができます。

  例えば

  let double = n => n * 2;
  // roughly the same as: let double = function(n) { return n * 2 }
  
  alert( double(3) ); // 6

• 引数がない場合は、括弧は空になりますが、存在する必要があります。

  let sayHi = () => alert("Hello!");
  
  sayHi();

アロー関数は、関数式と同じ方法で使用できます。

例えば、関数を動的に作成するには

let age = prompt("What is your age?", 18);

let welcome = (age < 18) ?
  () => alert('Hello!') :
  () => alert("Greetings!");

welcome();

アロー関数は、最初はなじみがなく、あまり読みやすくないように見えるかもしれませんが、すぐに構造に目が慣れてきます。

多くの単語を書くのが面倒な、単純な1行のアクションに非常に便利です。

複数行のアロー関数

これまでに見てきたアロー関数は非常にシンプルでした。 => の左側から引数を取り、それらを使用して右側の式を評価して返しました。

複数の式や文を含む、より複雑な関数が必要になることがあります。その場合は、中括弧で囲むことができます。主な違いは、中括弧では値を返すために return が必要になることです（通常の関数と同様）。

このように

let sum = (a, b) => {  // the curly brace opens a multiline function
  let result = a + b;
  return result; // if we use curly braces, then we need an explicit "return"
};

alert( sum(1, 2) ); // 3

まとめ

アロー関数は、特に1行のアクションに便利です。2種類あります。

1. 中括弧なし: (...args) => expression - 右側は式です。関数はそれを評価し、結果を返します。引数が1つだけの場合は、括弧を省略できます。例：n => n*2。
2. 中括弧あり: (...args) => { body } - 括弧を使用すると、関数内に複数の文を書くことができますが、何かを返すには明示的な return が必要です。