アロー関数は通常の関数とどう違いますか？

Question

Accepted Answer

アロー関数はより短く書けますが、本当の違いは構文だけでなく**バインディングの挙動**にあります。

```js
const regular = function () {};
const arrow = () => {};
const short = x => x * 2; // implicit return for one expression
```

## 主な違い

**1. 自身の `this` を持たない** — アロー関数は囲んでいるスコープから `this` を継承します。これは最も重要な違いであり、コールバックに最適な理由です。

```js
const timer = {
  seconds: 0,
  start() {
    setInterval(() => this.seconds++, 1000); // ✅ `this` is timer
    // a regular function here would have its own `this` (undefined) → bug
  },
};
```

**2. `arguments` オブジェクトを持たない** — 代わりにレストパラメータを使います。

```js
const sum = (...args) => args.reduce((a, b) => a + b, 0);
```

**3. コンストラクタとして使えない** — `new arrow()` は例外を投げ、`prototype` も持ちません。

## アローを使うべきでない場面

```js
const obj = {
  name: "Ann",
  greet: () => `Hi ${this.name}`, // ❌ `this` is NOT obj (it's outer scope)
  greet2() { return `Hi ${this.name}`; }, // ✅ method needs dynamic `this`
};
```

**オブジェクトのメソッド**にはアローを使わないでください（オブジェクトにバインドされません）。また、動的な `this`／`arguments` が必要な場合（`this` が要素であることに依存するイベントハンドラなど）も避けましょう。

## なぜ重要なのか

`this` の継承が望ましいコールバックや短い関数にはアロー関数を使い、メソッド、コンストラクタ、プロトタイプメソッドには通常の関数を使いましょう。