アロー関数の基本

関数を作成するための、よりシンプルで簡潔な構文がもう1つあります。それはしばしば関数式よりも優れています。これは “アロー関数” と呼ばれ、次のようになります:

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

…これは引数 arg1..argN を取り、それらを使用する expression を評価し、その結果を返す関数 func を作ります。

言い換えると、次のコードと概ね一緒です:

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

…が、はるかに簡潔ですね。

例を見てみましょう:

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

/* アロー関数は次よりも短い形式です:

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

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

もしも引数が1つだけの場合、括弧は省略可能なので、さらに短くできます:

// 次と同じです
// let double = function(n) { return n * 2 }
let double = n => n * 2;

alert( double(3) ); // 6

もしも引数がない場合、括弧は必須で、空白にします:

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

sayHi();

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

例えば、ここでは welcome() の例を再び書きます:

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

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

welcome(); // ok now

アロー関数は、最初は馴染みが無く、読みにくいように見えるかもしれませんが、構造に慣れるとすぐに変わります。

多くの文字を書くのが面倒なとき、シンプルなワンライナーの処理を書くときにはとても便利です。

複数行のアロー関数

上の例は、=> の左から引数を取得し、右側の式を評価しました。

複数の式や文のように、もう少し複雑なものが必要な時があります。それも可能ですが、この場合は括弧で囲む必要があります。そして、その中で通常の return を使います。

このようになります:

let sum = (a, b) => {  // 波括弧を使って複数行の関数を書けます
  let result = a + b;
  return result; // 波括弧を使った場合、結果を得るには return を使います
};

alert( sum(1, 2) ); // 3
他にもあります

ここでは、簡潔にするためにアロー関数を賞賛しました。しかし、それだけではありません!!

アロー関数は他にも興味深い機能を持っています。後ほどチャプターアロー関数ふたたび で触れます。

今の時点で、我々はすでにワンライナーの処理やコールバック処理のためにアロー関数を使うことができます。

サマリ

アロー関数はワンライナーに対し便利です。2つの種類があります:

  1. 括弧無し: (...args) => expression – 右側は式です: 関数はそれを評価しその結果を返します。
  2. 括弧あり: (...args) => { body } – 括弧があると、関数内で複数の文を書くことができます、しかし何かを返却する場合には、明確に return が必要です。

タスク

次のコードで、関数式をアロー関数に置き換えてください。:

function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "Do you agree?",
  function() { alert("You agreed."); },
  function() { alert("You canceled the execution."); }
);
function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "Do you agree?",
  () => alert("You agreed."),
  () => alert("You canceled the execution.")
);

短くてキレイに見えますね。

チュートリアルマップ

コメント

コメントをする前に読んでください…
  • 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
  • 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
  • 記事の中で理解できないことがあれば、詳しく説明してください。