# Fonction fléchée

> Syntaxe concise introduite en ES6 pour écrire des fonctions JavaScript, notée avec une flèche =>, qui ne redéfinit pas son propre contexte this.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/fonction-flechee/

Introduite avec ES6 en 2015, la fonction fléchée raccourcit l'écriture d'une fonction classique tout en changeant une règle importante : elle n'a pas son propre `this`, elle hérite de celui de la portée où elle est définie.

## Pourquoi ça compte dans un projet WordPress

Depuis que Gutenberg s'appuie massivement sur React et JavaScript moderne, les fonctions fléchées sont partout dans les blocs personnalisés : composants fonctionnels, gestionnaires d'événements, callbacks passés à `useEffect`. Leur gestion automatique de `this` évite le classique bug où une méthode perd son contexte une fois passée en callback.

## Exemple

```
class Compteur {
  constructor() {
    this.valeur = 0;
  }
  incrementer = () => {
    this.valeur++;
  };
}

const c = new Compteur();
const action = c.incrementer;
action(); // this.valeur reste bien lié à l'instance c
```

Avec une fonction classique déclarée de la même façon, l'appel `action()` perdrait la référence à l'instance et provoquerait une erreur ou un comportement inattendu.

## À ne pas confondre avec une fonction classique

- Une fonction fléchée n'a pas d'objet `arguments` ; il faut utiliser le paramètre rest (`...args`) pour récupérer une liste variable d'arguments.
- Elle ne peut pas servir de constructeur : impossible de l'appeler avec `new`.
- Sa syntaxe compacte (`const carre = n => n * n;`) convient bien aux petites fonctions utilitaires, mais nuit à la lisibilité pour une logique complexe sur plusieurs lignes.