JavaScriptのファットアロー関数（アロー関数）とは？基本構文と使い方を解説

JavaScriptのファットアロー関数は、その名の通りコードの行数を削減するのに役立つ記法です。矢印のような見た目から「ファットアロー」と呼ばれる=>という構文を使い、従来の関数定義で何度も書いていた「function」キーワードを省略できるのが大きな特徴です。

ファットアロー関数の基本構文

最もシンプルな構文は以下のとおりです。

argument => expression

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

(argument1 [, argument2]) => expression

通常の関数とアロー関数の比較

ここで、通常の関数とファットアロー関数のコードを比べてみましょう。

JavaScriptの通常の関数

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

JavaScriptのファットアロー関数

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

このように、アロー関数を使うことで「function」や「return」などのキーワードを省略でき、コードが1行にまとまりました。処理内容が一目でわかるため、可読性の向上にもつながります。

アロー関数を使うメリット

• コードの簡潔化： function キーワードや return 文を省略でき、記述量が大幅に減ります。
• 可読性の向上： 短いコールバック関数では、処理の意図が伝わりやすくなります。
• thisの扱いが直感的： アロー関数は自身のthisを持たず、外側のスコープのthisを引き継ぐため、コールバック内でのthisに関するトラブルを避けられます。

なお、配列のmapメソッドのように短いコールバックを渡す場面では特に効果的ですが、オブジェクトのメソッド定義などではthisの挙動に注意が必要です。用途に応じて適切に使い分けるとよいでしょう。