Comment les fonctions fléchées diffèrent-elles des fonctions ordinaires ?

Question

Accepted Answer

Les fonctions fléchées sont plus courtes, mais les vraies différences se trouvent dans le **comportement de liaison**, pas seulement dans la syntaxe.

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

## Les différences clés

**1. Pas de `this` propre** — les fonctions fléchées héritent de `this` de la portée englobante. C'est la différence la plus importante et pourquoi elles sont excellentes pour les rappels (callbacks) :

```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. Pas d'objet `arguments`** — utilisez les paramètres rest à la place :

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

**3. Ne peuvent pas être utilisées comme constructeurs** — `new arrow()` lève une erreur, et elles n'ont pas de `prototype`.

## Quand NE PAS utiliser une fonction fléchée

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

N'utilisez pas les fonctions fléchées pour les **méthodes d'objet** (elles ne se lieront pas à l'objet) ou quand vous avez besoin d'un `this`/`arguments` dynamique (gestionnaires d'événements qui dépendent de `this` étant l'élément).

## Pourquoi c'est important

Utilisez les fonctions fléchées pour les rappels et les fonctions courtes où hériter de `this` est ce que vous voulez ; utilisez les fonctions ordinaires pour les méthodes, les constructeurs et les méthodes de prototype.