Fonctions fléchées

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:

function calculateTaxes(amount) {
  return amount * 1.15;
}

calculateTaxes(5); // 5.75

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

const calculateTaxes = amount => amount * 1.15;

calculateTaxes(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.

Paramètres

Aucun

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 =>

() => { ... }

soit l'équivalent de:

function() { ... }

Un seul

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

(x) => { ... }
x => { ... }

sont l'équivalent de:

function(x) { ... }

Multiples

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

(x, y) =>  { ... }

soit l'équivalent de:

function(x, y) { ... }

Retour implicite

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

Cette syntaxe est appelée un retour implicite.

Par exemple:

() => "Bonjour";

est l'équivalent de:

function() {
  return "Bonjour";
}

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.

Simplifications

Certaines fonctionnalités de JavaScript sont particulièrement plus lisibles avec des fonctions fléchées.

forEach()

Par exemple, les boucles forEach() avec une fonction standard ressemble à ceci:

booksArr.forEach(function(book) { 
  console.log(book);
});

Alors qu'avec une fonction fléchée il est possible d'écrire:

booksArr.forEach(book => console.log(book));

addEventListener()

Par exemple, un addEventListener() simple avec une fonction standard ressemble à ceci:

btn.addEventListener("click", function() { 
  console.log("Bonjour"); 
});

Alors qu'avec une fonction fléchée il est possible d'écrire:

btn.addEventListener("click", () => console.log("Bonjour"));