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 commençait à nuire 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 "coté droit" si 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é.
