アロー関数について


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>hoge</li>
<li>fuga</li>
</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();

🐯 参考リンク

📚 おすすめの書籍

🖥 サーバについて

このブログでは「Cloud Garage」さんのDev Assist Program(開発者向けインスタンス無償提供制度)でお借りしたサーバで技術検証しています。 Dev Assist Programは、開発者や開発コミュニティ、スタートアップ企業の方が1GBメモリのインスタンス3台を1年間無料で借りれる心強い制度です!(有償でも1,480円/月と格安)