Les fonctions fléchées en JavaScript ES6
#1
Pourquoi des fonctions fléchées ?
Je l'ai déjà dit, en JavaScript, on utilise souvent des callbacks et souvent la fonction callback est déclarée à l'emplacement d'un argument. Il arrive aussi que dans le callback, on ait besoin de déclarer un deuxième callback.
Le codage de ces situations aboutit à du code peu lisible. Et cela nuit au langage JavaScript, à sa lisibilité, à son utilisation.
Une des solutions pour remédier à ce problème a été de proposer dans la version ES6 une nouvelle façon plus succincte de déclarer des fonctions. Il s'agit des fonctions fléchées.
Pour info, l'utilisation de promesses et/ou de fonctions à base d'async / await est une autre solution qui vient en plus pour améliorer la lisibilité du code. On y reviendra.
#2
Déclarer des fonctions fléchées
Une fonction fléchée est une fonction anonyme. Ci-dessous, on la déclare en l'affectant à une référence dont on se sert pour l'invoquer. Elle est aussi souvent déclarée en tant qu'argument d'un callback.
Dans le cas général, voilà comment on déclare une fonction fléchée. "A gauche" entre les parenthèses, on place la liste des paramètres, puis une flèche et à droite, entre les accolades, on place les instructions.
Tester le codeIl est possible de simplifier la déclaration dans un certain nombre de situations. Ci-dessous, on est dans un cas où on a besoin de déclarer qu'un seul paramètre et dans ce cas, on peut ne pas mettre les parenthèses.
Tester le codeSi il n'y a pas de paramètre, il faut mettre des parenthèses vides.
Tester le codeDu "côté droit", s'il n'y a qu'une seule instruction, on peut ne pas mettre les accolades.
Tester le codeDe plus, s'il n'y a qu'une seule instruction, il est inutile d'écrire le return. Ce dernier est implicite.
#3
Un fonctionnement particulier de this qui peut présenter un intérêt
Les fonctions fléchées reçoivent la valeur courante de this à l'endroit où elles sont déclarées (* valeur du this du scope parent) ce qui peut dans certaines situations présenter un intérêt. Je vous rappelle que ce n'est pas le cas des fonctions normales qui reçoivent un this en fonction de l'endroit où elles sont invoquées (* fonction constructeur, méthode d'un objet, fonction classique).
Je reviens en détails sur le fonctionnement de this dans un tutoriel dédié.
