Fonction fléchée en JavaScript : une syntaxe courte et un this différent

Deux caractères, une flèche, et la fonction tient sur une ligne. C'est la raison pour laquelle cette écriture s'est imposée partout, en particulier dans les fonctions passées à Array.map() ou à Array.filter().

Elle ne se contente pourtant pas de raccourcir. Elle change le comportement de this, et cette différence est la vraie raison de l'utiliser ou de l'éviter.

Définition

Une fonction fléchée est une expression de fonction écrite avec =>. Elle n'a ni this, ni objet arguments, ni propriété prototype qui lui soient propres. Ce tableau à deux colonnes résume les formes d'écriture.

const doubler = (n) => n * 2;
const additionner = (a, b) => a + b;
const saluer = (nom) => {
  const message = "Bonjour " + nom;
  return message;
};
const creerProfil = (nom) => ({ nom, actif: true });

console.log(doubler(21));         // 42
console.log(additionner(2, 3));   // 5
console.log(saluer("Ada"));       // Bonjour Ada
console.log(creerProfil("Ada"));  // { nom: 'Ada', actif: true }

Les accolades servent à ouvrir un corps, jamais à décrire un objet. D'où les parenthèses de la dernière ligne, qui lèvent l'ambiguïté.

La vraie différence : this

Une flèche reprend le this de l'endroit où elle est écrite, et rien ne peut le changer ensuite. C'est ce qui règle le problème classique de la fonction de rappel.

const compteur = {
  total: 0,
  incrementer() {
    [1, 2, 3].forEach(() => {
      this.total += 1; // this reste le compteur
    });
    return this.total;
  },
};

console.log(compteur.incrementer()); // 3

Avec une fonction classique à la place de la flèche, this ne désignerait plus l'objet. Voir Liaison de this pour le détail des règles.

Trois cas où l'éviter

• Comme méthode d'objet. Son this serait celui du fichier, pas celui de l'objet.
• Comme constructeur. L'appeler avec new lève une erreur, elle n'est pas prévue pour.
• Quand vous voulez arguments. Une flèche n'en a pas ; utilisez le Rest (...) à la place.

Questions fréquentes

Non, la différence de performance est nulle en pratique. Le choix se fait sur la lisibilité et sur le comportement de this, jamais sur la vitesse. Les moteurs traitent les deux formes de la même manière une fois le code compilé.

Indirectement. Une flèche est toujours anonyme, mais l'affecter à une constante lui donne un nom dans les traces d'erreur, ce qui suffit au débogage. Elle ne bénéficie en revanche pas du Hoisting (remontée) des déclarations de fonction : elle doit être déclarée avant son premier appel.

Le langage les rend facultatives, et les deux écritures sont valides. La plupart des configurations de formatage les ajoutent systématiquement, pour que l'ajout d'un second paramètre ne demande pas de retoucher la ligne. Un formateur automatique tranche cette question une fois pour toutes.