91. Fonctions fléchées (ES6)
Les fonctions fléchées (=>) offrent une syntaxe concise pour écrire des expressions de fonction. Elles sont très appréciées en JS moderne, en particulier pour les callbacks et les méthodes de tableau.
Syntaxe concise
| Type | Syntaxe |
|---|---|
| Complète | const add = function(a, b) { return a + b; } |
| Fléchée de base | const add = (a, b) => { return a + b; } |
| Paramètre unique | const greet = name => { return 'Salut ' + name; } (Parenthèses facultatives) |
| Retour implicite | const multiply = (a, b) => a * b; (Accolades et return omis si instruction unique) |
La différence de this (Concept crucial)
Les fonctions régulières définissent leur propre valeur de this en fonction de la manière dont elles sont appelées. Les fonctions fléchées, en revanche, ne lient pas leur propre this. À la place, elles héritent de la valeur de this de la portée englobante (lexicale).
Ce comportement les rend plus sûres à utiliser à l'intérieur de méthodes ou de gestionnaires d'événements, car this pointe toujours de manière fiable vers l'objet ou la fenêtre contenant.
javascript const app = { name: 'App', start: function() { setTimeout(() => { // La fonction fléchée hérite de 'this' depuis la méthode 'start' (qui est 'app') console.log(this.name + ' a démarré.'); }, 100); } }; app.start(); // Résultat : App a démarré.