JavaScript アロー関数（Arrow Function）

Arrow functionsはES6で導入されました。

Arrow functionsを使うと、より短い関数構文を記述できます:

let myFunction = (a, b) => a * b;

Arrow Functionの導入前:

hello = function() {
  return "Hello World!";
}

Arrow Functionを使った場合:

hello = () => {
  return "Hello World!";
}

もっと短くなりました！関数が単一のステートメントで、そのステートメントが値を返す場合、中括弧とreturnキーワードを省略できます:

Arrow Functionはデフォルトで値を返します:

hello = () => "Hello World!";

Note: この省略形は、関数が単一のステートメントの場合にのみ有効です。

パラメータがある場合は、それらを括弧内に渡します:

パラメータを持つArrow Function:

hello = (val) => "Hello " + val;

実際、パラメータが1つしかない場合は括弧を省略することもできます:

括弧なしのArrow Function:

hello = val => "Hello " + val;

thisはどうなる？

Arrow Functionでは、通常の関数と比較してthisの扱いが異なります。

簡単に言うと、Arrow Functionではthisのバインディングがありません。

通常の関数では、thisキーワードは関数を呼び出したオブジェクトを表しました。それはウィンドウ、ドキュメント、ボタンなどでした。

しかしArrow Functionでは、thisキーワードは常にArrow Functionを定義したオブジェクトを指します。

この違いを理解するために、2つの例を見てみましょう。

両方の例では、ページの読み込み時に1回、ボタンのクリック時にもう1回メソッドを呼び出します。

最初の例では通常の関数を使用し、2番目の例ではArrow Functionを使用します。

結果は、最初の例が異なる2つのオブジェクト（ウィンドウとボタン）を返し、2番目の例が2回ともウィンドウオブジェクトを返すことを示しています。これは、ウィンドウオブジェクトが関数の「所有者」であるためです。

例

通常の関数を使った場合、thisは関数を呼び出したオブジェクトを表します:

// 通常の関数:
hello = function() {
  document.getElementById("demo").innerHTML += this;
}

// ウィンドウオブジェクトが関数を呼び出します:
window.addEventListener("load", hello);

// ボタンオブジェクトが関数を呼び出します:
document.getElementById("btn").addEventListener("click", hello);

例

Arrow Functionを使った場合、thisは関数を定義したオブジェクトを表します:

// Arrow Function:
hello = () => {
  document.getElementById("demo").innerHTML += this;
}

// ウィンドウオブジェクトが関数を呼び出します:
window.addEventListener("load", hello);

// ボタンオブジェクトが関数を呼び出します:
document.getElementById("btn").addEventListener("click", hello);

関数を扱う際にはこれらの違いを覚えておいてください。通常の関数の挙動が必要な場合もありますが、そうでない場合はArrow Functionを使用してください。