Fonctions fléchées

2

Les fonctions fléchées, aussi appelées fat arrow functions en anglais, sont l'une des fonctionnalités les plus populaires de ES6. Elles permettent, entre autres, d'écrire des fonctions de façon plus concises.

Voici par exemple une fonction écrite avec la syntaxe ES5:

const calculerTaxes = function(montant) {
  return montant * 1.15;
}

calculerTaxes(5); // 5.75

Et revoici la même fonction, mais en fonction fléchée:

const calculerTaxes = montant => montant * 1.15;

calculerTaxes(5); // 5.75

On remarque que le résultat est plus court grâce à l'omission du mot-clé function, des parenthèses (), des accolades {} et du mot-clé return qui peut être omis en cas de retour implicite.

Les paramètres

Aucun paramètre

Dans le cas où aucun paramètre n'est requis, une fonction fléchée est déclarée avec des parenthèses vides suivis de =>

() => 'exemple'

Un seul paramètre

Lorsqu'un seul paramètre est requis, les parenthèses () sont optionnelles:

x => 'exemple'

est l'équivalent de:

(x) => 'exemple'

Multiples paramètres

Dans ce cas, les parenthèses () sont requises:

(x, y) => 'exemple'

Retour implicite

Lorsqu'une fonction ne contient qu'une seule ligne et retourne une valeur, il est possible d'omettre les accolades {}.

Cette syntaxe est appelée un retour implicite.

Par exemple:

() => 'exemple';

est l'équivalent de:

() => {
  return 'exemple'
}

Dès qu'une fonction contient plus d'une ligne, il est nécessaire d'utiliser les accolades {}. Dès lors, pour retourner une valeur, il faudra utiliser le mot-clé return.

Pour en savoir plus, voir cet article MDN🦖 sur les fonctions fléchées.

Donnez votre opinion
sur les notes de cours sur cette page.
Merci d'avoir partagé ton opinion 😎
Pssst, c'est 💯 anonyme