Les bases des fonctions fléchées en JavaScript

Introduction aux fonctions fléchées

Les fonctions fléchées, introduites dans ES6 (ECMAScript 2015), sont une façon concise d'écrire des expressions de fonction en JavaScript. Elles sont particulièrement utiles pour les fonctions courtes et sont utilisées partout dans les bibliothèques et applications JavaScript modernes — notamment comme callbacks passés aux méthodes de tableau, aux minuteries et aux gestionnaires d'événements.

Une fonction fléchée est bien plus qu'une syntaxe raccourcie. Elle se comporte également différemment d'une fonction ordinaire sur un point important : elle ne crée pas son propre this. Cette page couvre la syntaxe et ce comportement de this ; pour les cas particuliers avancés (pas d'arguments, pas de new, générateurs), consultez Les fonctions fléchées, revisitées.

Syntaxe de base

La forme générale d'une fonction fléchée est :

let functionName = (param1, param2, ..., paramN) => expression;

Cela crée une fonction qui prend param1, param2, ..., paramN comme paramètres et retourne le résultat de expression. Le token => se lit « va vers » ou simplement « flèche ».

L'expression de fonction traditionnelle équivalente ressemble à ceci — comparer les deux côte à côte montre ce que la syntaxe fléchée supprime :

La version fléchée supprime le mot-clé function, les accolades et le return explicite. Le résultat est identique.

Fonctions fléchées sur une ligne (retour implicite)

Lorsque le corps est une expression unique, vous pouvez omettre les accolades et le mot-clé return. La valeur de l'expression est retournée automatiquement — on appelle cela un retour implicite :

Fonctions fléchées multi-lignes (retour explicite)

Si le corps nécessite plusieurs instructions, encadrez-le avec des accolades {}. Une fois les accolades utilisées, le retour implicite disparaît, vous devez donc écrire return vous-même si vous souhaitez retourner une valeur :

Oublier le return à l'intérieur des accolades est une erreur fréquente chez les débutants : la fonction retourne alors undefined.

Règles relatives aux parenthèses

Les parenthèses autour des paramètres suivent des règles simples :

• Un seul paramètre : les parenthèses sont optionnelles — x => x * 2.
• Zéro paramètre : des parenthèses vides sont obligatoires — () => 42.
• Deux paramètres ou plus : les parenthèses sont obligatoires — (a, b) => a + b.

Retourner un objet littéral

Pour retourner un object avec la syntaxe de retour implicite, encadrez l'object entre parenthèses. Sans elles, JavaScript interprète le { comme le début d'un corps de fonction, pas d'un objet littéral — la fonction s'exécute donc et retourne undefined :

Avantages des fonctions fléchées

1. Concision — Les fonctions fléchées ont une syntaxe plus courte que les expressions de fonction traditionnelles, ce qui rend les callbacks plus lisibles.
2. this lexical — Les fonctions fléchées n'ont pas leur propre this. Elles héritent de this de la portée englobante (parente), ce qui élimine toute une catégorie de bugs liés à la perte de this dans les callbacks.
3. Retours implicites — Avec la syntaxe sur une ligne, le return est automatique, ce qui rend les transformations courtes plus propres.

Comment this fonctionne dans les fonctions fléchées

C'est la différence la plus importante entre les fonctions fléchées et les fonctions ordinaires. Une fonction ordinaire obtient son propre this, déterminé par la façon dont elle est appelée. Une fonction fléchée n'a pas de this propre — elle remonte this depuis la portée où elle a été définie. On appelle cela le this lexical.

Le problème classique apparaît à l'intérieur d'une méthode qui planifie un callback. Avec une fonction ordinaire, le this du callback est perdu ; avec une fonction fléchée, this est hérité :

Parce que la fonction fléchée capture this depuis startArrow (où this est l'object counter), elle lit correctement this.value. La fonction ordinaire à l'intérieur de setTimeout est appelée sans contexte d'object, donc son this.value est undefined. Pour un examen approfondi de la façon dont this est déterminé dans les méthodes ordinaires, voir Méthodes d'object, "this".

Limitations des fonctions fléchées

Les fonctions fléchées ne sont pas un remplacement universel pour toutes les fonctions. Leur this lexical est précisément ce qui les rend inadaptées dans certaines situations.

1. Peu adaptées comme méthodes d'object — Parce qu'une fonction fléchée hérite de this de la portée englobante plutôt que de l'object sur lequel elle est appelée, l'utiliser comme méthode ne produit généralement pas le résultat escompté.
2. Ne peuvent pas être des constructeurs — Les fonctions fléchées ne peuvent pas être utilisées avec new et génèrent une erreur si vous essayez ; elles ne sont pas des constructeurs.
3. Pas d'object arguments propre — À l'intérieur d'une fonction fléchée, arguments fait référence à celui de la portée externe, pas aux arguments passés à la fonction fléchée elle-même. Utilisez plutôt les paramètres rest (...args).

Le piège de la méthode en pratique — this ne pointe pas vers l'object :

Quand utiliser laquelle

• Choisissez une fonction fléchée pour les callbacks courts : méthodes de tableau, promesses, minuteries et gestionnaires d'événements où vous souhaitez conserver le this environnant.
• Choisissez une fonction ordinaire lorsque vous avez besoin d'une méthode qui utilise this pour référencer son propre object, d'un constructeur, ou d'un accès à l'object arguments.

Exemples pratiques

Méthodes de tableau

Les fonctions fléchées brillent avec les méthodes de tableau comme map, filter et reduce, où chaque appel est une petite transformation :

Écouteurs d'événements

Les fonctions fléchées sont pratiques pour les écouteurs d'événements, en particulier à l'intérieur d'une classe ou d'un object où vous souhaitez que this reste pointé vers l'instance englobante (cet exemple utilise le navigateur, donc exécutez-le dans une page plutôt que dans la console) :

document.getElementById("myButton").addEventListener("click", () => {
  console.log("Button clicked!");
});

Callbacks et promesses

Elles maintiennent le code asynchrone compact lorsqu'elles sont utilisées comme callbacks :

Conclusion

Les fonctions fléchées sont une fonctionnalité polyvalente et quotidienne du JavaScript moderne. Elles offrent une syntaxe concise, prennent en charge les retours implicites pour les corps d'une seule ligne et — surtout — héritent de this de la portée englobante, ce qui évite les bugs de contexte courants dans les callbacks. Elles sont idéales pour les méthodes de tableau, les promesses et les gestionnaires d'événements, mais pas pour les méthodes d'object qui dépendent de leur propre this, les constructeurs, ou le code qui nécessite l'object arguments. Savoir quel type de fonction convient à chaque situation est la clé pour bien les utiliser. Continuez avec Les fonctions fléchées, revisitées pour les cas particuliers restants.

Pratique