6.5 Fonction fléchée

Dans la vidéo précédente, nous avons écrit une fonction prédicat passée à la méthode find. ES6 introduit une syntaxe beaucoup plus concise pour ce type de fonction-argument : les arrow functions (fonctions fléchées). Dès que vous passez une fonction comme callback à une autre fonction, c'est généralement le bon réflexe.

De function à =>

Partons de la version classique :

const course = courses.find(function(course) {
							  return course.name === 'a';
							});

Première étape, on supprime le mot-clé function et on ajoute une flèche entre la liste des paramètres et le corps de la fonction :

const course = courses.find((course) => {
							  return course.name === 'a';
							});

Parenthèses optionnelles avec un seul paramètre

Quand la fonction n'a qu'un seul paramètre, les parenthèses autour deviennent optionnelles :

const course = courses.find(course => {
							  return course.name === 'a';
							});

Aucun paramètre ? Les parenthèses vides restent obligatoires : () => .... Plusieurs paramètres ? Parenthèses obligatoires aussi : (a, b) => ....

Return implicite pour un corps d'une expression

Dernière optimisation : si le corps de la fonction est une seule expression dont on retourne le résultat, on peut supprimer les accolades et le mot-clé return. La valeur de l'expression est automatiquement retournée.

const course = courses.find(c => c.name === 'a');

Voilà : trois étapes de simplification, et notre prédicat tient sur une ligne. La syntaxe fléchée s'est imposée dans le JavaScript moderne. Dans la prochaine vidéo, nous abordons la suppression d'éléments dans un tableau.