JavaScriptのアロー関数とは？通常の関数との3つの違いをわかりやすく解説

MDN（Mozilla Developer Network）によると、アロー関数（矢印関数）は、通常の関数式に比べて構文が簡潔に書ける代替手段です。ただし、this、arguments、super、new.targetといったキーワードに対する独自のバインディングを持たないという特徴があります。そのため、アロー関数はメソッドとして使うには不向きであり、コンストラクタとしても利用できません。

この記事では、JavaScriptにおける通常の関数とアロー関数の、一見すると気づきにくい3つの重要な違いについて詳しく解説します。

1. 独自のthisバインディングを持たない

アロー関数には自身のthisが存在しません。アロー関数内で参照されるthisの値は、常に外側のスコープ（囲んでいるスコープ）から継承されます。これは通常の関数との最も大きな違いの一つです。

サンプルコード

this.a = 100;
let arrowFunc = () => {this.a = 150};
function regFunc() {
    this.a = 200;
}
console.log(this.a)
arrowFunc()
console.log(this.a)
regFunc()
console.log(this.a)

実行結果

100
150
150

実行結果を見ると、アロー関数は自分のスコープの外側にあるthisオブジェクトの値を変更していることが分かります。一方、通常の関数の場合は、あくまで自分自身のスコープ内でのみ値が変更されます。

2. argumentsオブジェクトを持たない

JavaScriptでは、関数内のargumentsは特殊なオブジェクトで、関数に渡されたすべての引数を取得するために使用できます。しかし、thisと同様に、アロー関数はargumentsオブジェクトに対する独自のバインディングを持ちません。アロー関数内でargumentsを参照した場合、外側のスコープのargumentsがバインドされることになります。

なお、引数を可変長で受け取りたい場合は、ES2015で導入されたレストパラメータ（...args）を使うことで、アロー関数でも同様の処理を実現できます。

3. 呼び出し可能だが、コンストラクタとして生成不可

関数には「呼び出し可能（callable）」と「コンストラクタとして生成可能（constructible）」という2つの性質があります。

• constructible（生成可能）：new User()のように、newキーワード付きで呼び出せること
• callable（呼び出し可能）：newを使わずに、通常の関数呼び出しとして実行できること

関数宣言や関数式によって作成された関数は、両方の性質を持ちます。つまり、呼び出しもコンストラクタとしての利用も可能です。

一方、アロー関数（およびメソッド）は「呼び出し可能」のみです。また、クラスのコンストラクタは「生成可能」のみであり、通常の関数呼び出しはできません。

もし呼び出し不可能な関数を呼び出そうとしたり、生成不可能な関数をコンストラクタとして使用しようとしたりすると、ランタイムエラーが発生します。

サンプルコード

let arrowFunc = () => {}
new arrowFunc()

実行結果

このコードを実行すると、次のようなエラーが出力されます。

arrowFunc is not a constructor

まとめ

アロー関数は簡潔な記述ができる便利な機能ですが、以下の3つの違いを理解して適切に使い分けることが重要です。

• thisを独自に持たず、外側のスコープから継承する
• argumentsオブジェクトを持たない
• 呼び出しはできるが、コンストラクタとしては使用できない

特にthisの扱いはバグの原因になりやすいポイントなので、コールバック関数やイベントハンドラなど、スコープの挙動を意識したい場面でアロー関数を活用すると良いでしょう。