JavaScriptにおけるラムダ式。ECMAScript 2015 (ES6)から追加された。

目次 概要 特徴 書式 thisの違い

概要

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

リンク

用語の所属
JavaScript
関連する用語
ラムダ式

[再検索] [戻る]