Miten nuolifunktiot eroavat säännöllisistä funktioista?

Question

Accepted Answer

Nuolifunktiot ovat lyhyempiä, mutta todelliset erot ovat **sitoutumiskäyttäytymisessä**, ei vain syntaksissa.

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

## Tärkeimmät erot

**1. Ei omaa `this`:iä** — nuolifunktiot perivät `this`:n ympäröivästä laajuudesta. Tämä on tärkein ero ja miksi ne ovat loistavia takaisinkutsuille:

```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. Ei `arguments`-objektia** — käytä rest-parametreja sen sijaan:

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

**3. Ei voida käyttää konstruktoreina** — `new arrow()` heittää poikkeaman, eikä niillä ole `prototype`.

## Milloin ÄLÄ käytä nuolifunktioita

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

Älä käytä nuolifunktioita **objektin metodeille** (ne eivät sido objektiin) tai kun tarvitset dynaamista `this`/`arguments`-käyttäytymistä (tapahtumahandlers, jotka nojautuvat `this`:iin olevan elementti).

## Miksi se on tärkeää

Käytä nuolifunktioita takaisinkutsuille ja lyhyille funktioille, joissa `this`:n periminen on mitä haluat; käytä säännöllisiä funktioita metodeille, konstruktoreille ja prototyypin metodeille.