JavaScriptのアロー関数とは？基本構文と従来の関数との違いを解説

アロー関数（矢印関数）は、その名の通りコードの行数を減らすのに役立つJavaScriptの機能です。構文に使われる「=>」が太い矢印（ファットアロー）のように見えることから、この名前が付きました。アロー関数を使うことで、「function」というキーワードを何度も書く手間を省くことができます。

アロー関数の基本構文

アロー関数の基本的な構文は以下の通りです。

argument => expression

引数が複数ある場合は、次のように括弧で囲んで記述します。

(argument1 [, argument2]) => expression

それでは、従来の関数とアロー関数を比較して、その違いを見てみましょう。

従来の関数（function）を使った書き方

まずは、通常の関数式を使って配列の各要素を2乗する例です。

var rank = [7, 8, 9];
var display = rank.map(function(num) {
    return num * num;
});

アロー関数を使った書き方

同じ処理をアロー関数で書き換えると、次のようになります。

var rank = [7, 8, 9];
var display = rank.map((num) => num * num);
document.write(display);

このように、アロー関数を使うことで「function」キーワードや「return」文を省略でき、コードが大幅に簡潔になります。特に配列のmapやfilterなどのメソッドと組み合わせると、その効果を実感できるでしょう。

補足：アロー関数の特徴

アロー関数には、コードを短くする以外にも重要な特徴があります。通常の関数と異なり、thisをレキシカルに束縛するため、定義されたスコープのthisをそのまま参照します。これにより、コールバック関数内でのthisの扱いに悩むことが少なくなります。ただし、オブジェクトのメソッドとして使用する場合や、prototypeメソッドの定義には適さない点にも注意が必要です。