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.

En résumé

Les fonctions fléchées offrent une syntaxe plus courte et lisible pour écrire des fonctions, en particulier comme callbacks. Cette leçon explore comment utiliser la syntaxe `=>` pour séparer les paramètres du corps, comment omettre les parenthèses avec un seul paramètre, et comment raccourcir le code en une seule ligne quand la fonction ne contient qu'une expression de retour.

Points clés

• La syntaxe de base d'une fonction fléchée utilise `=>` pour séparer les paramètres du corps de la fonction
• Avec un seul paramètre, les parenthèses peuvent être omises pour une syntaxe plus propre
• Sans paramètres, une paire de parenthèses vides est requise
• Une fonction à une seule ligne de retour peut être écrite sur une seule ligne en omettant les accolades
• Les fonctions fléchées sont particulièrement utiles comme callbacks pour les méthodes de tableau comme filter()

Questions fréquentes

Pourquoi utiliser une fonction fléchée?

Les fonctions fléchées offrent une syntaxe plus concise et lisible, surtout quand vous passez une fonction comme callback à une autre méthode.

Peut-on toujours omettre les parenthèses autour du paramètre?

Non, on ne peut omettre les parenthèses que si la fonction a exactement un seul paramètre. Avec zéro ou plusieurs paramètres, les parenthèses sont obligatoires.

Comment écrire la fonction fléchée la plus courte?

Si la fonction n'a qu'une seule ligne de code qui retourne une valeur, on peut omettre les accolades et le mot-clé `return`, puis tout mettre sur une seule ligne.