À retenir
- Syntaxe très concise qui permet d'écrire moins de code.
- Utilise le symbole
=>pour séparer les paramètres du corps de la fonction. - N'a pas son propre contexte
this(elle hérite de celui du parent).
Une fonction fléchée est une manière raccourcie d'écrire une fonction en programmation, principalement en JavaScript. Imaginez que c'est une version « allégée » d'une recette de cuisine : au lieu de rédiger tout un protocole avec des phrases complètes, on utilise une flèche => pour aller directement à l'essentiel, reliant les ingrédients (les paramètres) au résultat (l'action à faire).
Étymologie
Le terme est une traduction directe de l'anglais arrow function. Il fait référence au symbole graphique =>, composé d'un signe égal et d'un chevron, qui ressemble visuellement à une flèche. Ce concept a été popularisé avec la mise à jour majeure du langage JavaScript en 2015 (norme ES6).
Exemples d'usage
const double = (n) => n * 2;: Une fonction simple qui multiplie un nombre par deux.utilisateurs.filter(u => u.age > 18);: Utilisation dans une liste pour ne garder que les adultes, sans avoir à écrire le mot-cléfunction.
Cas d'usage
On les utilise massivement dans le développement web moderne, notamment pour traiter des listes de données (filtrer, trier) ou pour gérer des événements (comme le clic sur un bouton). Elles sont aussi privilégiées lorsqu'on veut qu'une fonction conserve le contexte (le this) de l'endroit où elle a été créée.
Bonnes pratiques
Privilégiez les fonctions fléchées pour les calculs courts ou les traitements de données rapides. Cependant, évitez de les utiliser comme méthodes à l'intérieur d'un objet si vous avez besoin d'accéder aux autres propriétés de cet objet via this, car elles ne possèdent pas leur propre contexte.
Synonymes
Antonymes
Conseil
Si vous débutez, utilisez-les d'abord pour les petites opérations sur les tableaux (map, forEach). C'est là que leur clarté est la plus évidente. Gardez les fonctions classiques pour les constructeurs ou les méthodes complexes d'objets.
Questions fréquentes
Quelle est la différence avec une fonction classique ?
Outre la syntaxe plus courte, la fonction fléchée ne crée pas son propre 'this', ce qui évite bien des erreurs dans la gestion du contexte en JavaScript.
Peut-on nommer une fonction fléchée ?
Elles sont anonymes par nature, mais on peut les stocker dans une variable (comme 'const maFonction = ...') pour leur donner un nom.