アロー関数 (JavaScript)
読み：あろーかんすう
外語：arrow function
JavaScriptにおけるラムダ式。ECMAScript 2015 (ES6)から追加された。
概要
JavaScriptはコールバック関数(リスナー)などが気軽に使われる傾向にある言語で、このため無名関数が頻繁に使われる。
これをよりシンプルに書きたいという需要があり、ここにラムダ式という流行を取り入れたのがアロー関数である。
通常の関数と完全に同じ動きをするわけではないが、殆どの場合で置き換えができる。
特徴
書式
無名関数があるとする。
function() { return; }
function(x) { return x + 1; }
それぞれ、アロー関数を使うと次のように書ける。
() => { return; }
(x) => { return x + 1; }
また、出力の式が1行で済むならreturnや{}ブロックすら不要である。
const result = (x) => x + 1;
なお、引数の()は省略可能で、上の例では (x) => x + 1; を x => x + 1; と書いてもエラーにはならない。
これで、ひたすらfunctionと打ち込んだりコピペしたりする面倒が大幅に減らせる。
thisの違い
通常の関数とアロー関数ではthisの動きが全く違う。
通常の関数で使われる this が指すのは呼び出し元のオブジェクトだが、アロー関数は呼び出し元ではなく定義された場所で this が束縛される。
jQueryのイベントなど関数内でthisを用いるケースは多いが、この場合はアロー関数にしてしまうとイベントが発生したオブジェクトを this で得ることができないため、作り替えが必要になる。
例えばボタンが押されたら色を赤にする処理を仮定する。
$('#btn').on('click', function() {
$(this).css('color', '#f00');
});
これをそのままアロー関数にしても動かない。thisはボタンではなくwindowを指しているためである。
$('#btn').on('click', () => {
$(this).css('color', '#f00'); // 動かない
});
実はこのコールバック関数(リスナー)は変数を一つ引数に持っているので、それを使えばよい。引数(event)の()は省略も可能である。
$('#btn').on('click', (event) => {
$(event.currentTarget).css('color', '#f00'); //OK
});
対象のオブジェクトは、引数をeventとするとevent.currentTargetで得られる。
再検索