アロー関数について

ES2015の新し構文「アロー関数」は無名関数を完結に記述できる記法です。thisの扱いが直感的でわかりやすいです。

//従来のfunctionの定義
var fn = function (x) { /* 関数本体 */ };

//上記を「アロー関数」に置き換えたもの
var fn = (x) => { /* 関数本体 */ };

😎 簡潔な記述

従来のfunctionに比べて完結でわかりやすい記述ができます。

var arr = [1, 2, 3, 4, 5];

var sum = arr.reduce((a, b) => a + b); //=> 15
var even = arr.filter(v => v % 2 == 0); // [2, 4]
var double = arr.map(v => v * 2); [2, 4, 6, 8, 10]

🍮 複数行での記述

アロー関数を複数行で記述する場合はこちら。

<ul>
  <li>hogeli>
  <li>fugali>
ul>

$('li').each((i, elm) => {
    console.log(i);
});

👽 スコープ内のthisを補足する

通常の無名関数はthisの値が変化しますが、アロー関数ではthisを関数の定義時に決定します。
これにより、thisをより直感的に扱うことができます。

var obj = {
    show: function () {
        console.log(this); //=> Object

        var firstFunction = function () {
            console.log(this); //=> undefined
        };
        firstFunction();

        var secondFunction = () => {
            console.log(this); //=> Object
        };
        secondFunction();
    }
};
obj.show();