JavaScript | 「アロー関数の使いどころと、あえて使わないほうがいい場面」を整理

では「アロー関数の使いどころ」と「あえて使わないほうがいい場面」を整理してみましょう。これを知っておくと、実際のコードで迷わなくなります。

アロー関数を使うと便利な場面

• 配列操作
  map, filter, forEach, reduce などで短く書ける

let nums = [1, 2, 3];
let doubled = nums.map(n => n * 2);
console.log(doubled); // → [2, 4, 6]

let nums = [1, 2, 3];
let doubled = nums.map(n => n * 2);
console.log(doubled); // → [2, 4, 6]

• コールバック関数
  イベント処理やタイマーなどで「一度きりの処理」を書くとき

setTimeout(() => console.log("3秒後に実行"), 3000);

setTimeout(() => console.log("3秒後に実行"), 3000);

• 関数を値として渡すとき
  その場で処理を定義して渡すときにスッキリ

let result = [5, 10, 15].reduce((sum, n) => sum + n, 0);
console.log(result); // → 30

let result = [5, 10, 15].reduce((sum, n) => sum + n, 0);
console.log(result); // → 30

アロー関数を使わないほうがいい場面

• オブジェクトのメソッド

let obj = {
  value: 42,
  show: () => {
    console.log(this.value); // → undefined
  }
};
obj.show();

let obj = {
  value: 42,
  show: () => {
    console.log(this.value); // → undefined
  }
};
obj.show();

→ アロー関数は自分の this を持たないので、オブジェクトのプロパティを参照できない。
👉 この場合は関数リテラルを使うべき。

• コンストラクタ関数

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

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

→ アロー関数は new で呼び出せない。

• prototype を使う関数 クラス的な使い方をするなら関数リテラル（または class 構文）が必要。

まとめ

• アロー関数を使うべき場面
  • 配列操作
  • コールバック処理
  • 短く書きたい一時的な関数
• 関数リテラルを使うべき場面
  • オブジェクトのメソッドで this を使うとき
  • コンストラクタ関数を作るとき
  • prototype を使うとき

💡 初心者へのアドバイス：

• 基本はアロー関数でOK
• ただし「this が必要な場面」や「オブジェクト生成」では関数リテラルを選ぶ