Fonctions fléchées (ES6, TypeScript)

Les fonctions fléchées sont une syntaxe raccourcie pour les expressions de fonction. Elles omettent le mot-clé function et ajoutent une flèche => entre les arguments et le corps de la fonction.

Définition et syntaxe

Les fonctions fléchées sont une syntaxe raccourcie pour écrire les expressions de fonction (fonctions qu’on passe en paramètre).

Exemple :

const names = ['pif', 'paf', 'pouf'];

// ES5 - Expression de fonction classique
names.forEach(function(name) {
  console.log(name);
});

// ES6 - Fonction fléchée
names.forEach((name) => {
  console.log(name);
});

Pour convertir une fonction “classique” en fonction fléchée :

  • On supprime le mot-clé function.
  • On ajoute une flèche => (fat arrow) entre les arguments et le corps de la fonction.

Valeur de this dans une fonction fléchée

Dans le corps d’une fonction fléchée, this n’est pas bindé à la fonction elle-même, mais au contexte dans lequel la fonction est définie, ce qui est une très bonne chose.

Avant les fonctions fléchées, chaque nouvelle expression de fonction définissait son propre this, ce qui était souvent source de problèmes et forçait le développeur à copier une référence à this avant d’entrer dans l’expression de fonction (le fameux var that = this).

Voir #79 Pourquoi this fonctionne correctement dans une fonction fléchée ? pour plus détails sur ce point.

Syntaxe encore plus courte

On peut raccourcir encore davantage une fonction fléchée :

  • En écrivant tout son code sur une seule ligne.
  • En supprimant les ( ) qui encadrent l’argument. Possible uniquement si la fonction n’a qu’un seul argument.
  • En supprimant les { } qui encadrent l’instruction. Possible uniquement si la fonction n’a qu’une seule instruction.
// Fonction fléchée
names.forEach((name) => {
  console.log(name);
});

// Ré-écriture sur une seule ligne
names.forEach( (name) => { console.log(name); } );

// Suppression des ( ) et des { }
names.forEach( name => console.log(name) );  // Un `return` implicite est ajouté

Autrement dit :

  • Les parenthèses à GAUCHE de la flèche ne sont obligatoires QUE SI la fonction ne prend pas d’argument ou si elle prend plus d’un argument.
  • Les accolades à DROITE de la flèche ne sont obligatoires QUE SI le corps de la fonction contient plusieurs instructions. Si la fonction ne contient qu’une instruction, alors on peut oublier les accolades, ce qui ajoute un return implicite avant l’instruction.


Ressources supplémentaires

Informations

Tags : es6typescript

Dernière mise à jour :

Auteur : AngularChef

Qualité : Bonne