open

Les fonctions fléchées en Javascript ES6

#1 Pourquoi des fonctions fléchées ? open

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 open

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 code

Il 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 code

Si il n'y a pas de paramètre il faut mettre des parenthèses vides.

Tester le code

Du "coté droit" si il n'y a qu'une seule instruction on peut ne pas mettre les accolades.

Tester le code

De plus s'il n'y a qu'une seule instruction il est inutile d'écrire le return. Ce dernier est implicite.

Tester le code

#3 Attention au fonctionnement de this open

Les fonctions fléchées reçoivent la valeur courante de this à l'endroit où elles sont déclarées.

Je reviendrai en détail sur le fonctionnement de this dans un tutoriel dédié.