Wie unterscheiden sich Pfeilfunktionen von regulären Funktionen?

Question

Accepted Answer

Pfeilfunktionen sind kürzer, aber die echten Unterschiede liegen im **Bindungsverhalten**, nicht nur in der Syntax.

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

## Die wichtigsten Unterschiede

**1. Kein eigenes `this`** — Pfeilfunktionen erben `this` aus dem umschließenden Scope. Dies ist der wichtigste Unterschied und der Grund, warum sie großartig für Callbacks sind:

```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. Kein `arguments`-Objekt** — verwende stattdessen Rest-Parameter:

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

**3. Können nicht als Konstruktoren verwendet werden** — `new arrow()` wirft einen Fehler, und sie haben kein `prototype`.

## Warum es nicht zu verwenden ist

```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`
};
```

Verwende keine Pfeilfunktionen für **Objektmethoden** (sie binden nicht an das Objekt) oder wenn du ein dynamisches `this`/`arguments` benötigst (Event-Handler, die darauf verlassen, dass `this` das Element ist).

## Warum es wichtig ist

Verwende Pfeilfunktionen für Callbacks und kurze Funktionen, bei denen die Vererbung von `this` das ist, was du möchtest; verwende reguläre Funktionen für Methoden, Konstruktoren und Prototypmethoden.