【JavaScript】通常の関数とアロー関数の3つの違いを徹底解説

MDN（Mozilla Developer Network）によると、アロー関数（Arrow Function）は、通常の関数式をより簡潔に記述できる構文ですが、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 オブジェクトそのものを書き換えている点です。一方、通常の関数は自分自身の this の範囲内でのみ変更を行います。このように、this の挙動が異なることで、同じ処理でも結果が変わってくるのです。

2. アロー関数には「arguments」オブジェクトがない

通常の関数では、arguments は関数に渡されたすべての引数を取得できる特別なオブジェクトです。しかし、this と同様に、アロー関数は arguments への独自のバインディングを持たず、外側のスコープの arguments に結び付けられます。

アロー関数内で渡された引数をすべて受け取りたい場合は、レストパラメーター（...args）を使うのが安全で推奨される方法です。

const sum = (...args) => args.reduce((acc, n) => acc + n, 0);
console.log(sum(1, 2, 3)); // 6

3. アロー関数は「呼び出し可能」だが「構築可能」ではない

JavaScriptの関数には、次の2つの性質があります。

• 呼び出し可能（Callable）：new を付けずに、通常の関数呼び出しができる
• 構築可能（Constructable）：new User() のように new 演算子で新しいオブジェクトを生成できる

function宣言やfunction式によって作られた関数は、呼び出し可能かつ構築可能です。一方、アロー関数（およびメソッド）は呼び出し可能であるだけ、クラスのコンストラクターは構築可能であるだけという性質を持ちます。

呼び出せない関数を呼び出そうとしたり、構築できない関数を new しようとしたりすると、ランタイムエラーが発生します。

エラー例

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

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

TypeError: arrowFunc is not a constructor

まとめ：違いの比較表

アロー関数は短く簡潔に書ける便利な構文ですが、this や arguments の挙動、そしてコンストラクターとして使えない点を理解した上で使い分けることが重要です。オブジェクトのメソッドやコンストラクターには通常の関数（またはクラス）、コールバックなど this を外側に固定したい場面にはアロー関数を選ぶのがベストプラクティスといえるでしょう。