アロー関数 (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 が束縛される。

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で得られる。