JavaScript | 「関数リテラル（無名関数）」と「アロー関数」の比較

「関数リテラル（無名関数）」と「アロー関数」は見た目が似ていますが、いくつか大事な違いがあります。初心者向けに整理してみましょう。

書き方の違い

👉 アロー関数は「短く書ける」のが最大の特徴。

主な違い

• 1. 記述の簡略化
  • 関数リテラルは function キーワード必須アロー関数は => を使い、1行なら {} や return を省略できる

// 関数リテラル
let square = function(x){
  return x * x;
};

// アロー関数
let square = x => x * x;

// 関数リテラル
let square = function(x){
  return x * x;
};

// アロー関数
let square = x => x * x;

• 2. this の扱い
  • 関数リテラル：呼び出し方によって this が変わるアロー関数：外側のスコープの this を引き継ぐ（＝自分では this を持たない）

let obj = {
  value: 10,
  normalFunc: function(){
    console.log(this.value); // → 10
  },
  arrowFunc: () => {
    console.log(this.value); // → undefined（外側のthisを参照）
  }
};

obj.normalFunc();
obj.arrowFunc();

let obj = {
  value: 10,
  normalFunc: function(){
    console.log(this.value); // → 10
  },
  arrowFunc: () => {
    console.log(this.value); // → undefined（外側のthisを参照）
  }
};

obj.normalFunc();
obj.arrowFunc();

👉 イベント処理やオブジェクトのメソッドでは、この違いが重要になります。

• 3. コンストラクタとして使えるか
  • 関数リテラル：new を使ってオブジェクトを作れるアロー関数：コンストラクタには使えない

let Person = function(name){
  this.name = name;
};
let p = new Person("Taro"); // OK

let PersonArrow = (name) => { this.name = name; };
let p2 = new PersonArrow("Taro"); // エラー！

let Person = function(name){
  this.name = name;
};
let p = new Person("Taro"); // OK

let PersonArrow = (name) => { this.name = name; };
let p2 = new PersonArrow("Taro"); // エラー！

まとめ

• 関数リテラル
  • 伝統的な書き方
  • this が呼び出し方で変わる
  • コンストラクタとして使える
• アロー関数
  • 簡潔に書ける
  • this を外側から引き継ぐ
  • コンストラクタには使えない

💡 初心者へのおすすめ：

• 普段はアロー関数でOK（短く書けるし、this の混乱も少ない）
• オブジェクトのメソッドやコンストラクタを作るときは関数リテラルを使う