Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

2.6. Les fonctions fléchées, ou « Arrow Functions »

Les arrows functions (ou fonctions ‘fléchées’ en français) sont une nouveauté d’ES6. Le premier cas d’utilisation des arrows functions est avec this. L’utilisation de this peut être compliquée, surtout dans le contexte de fonctions à l’intérieur d’autres fonctions. Prenons l’exemple ci-dessous :

class Person { 
 constructor(firstName, email, button) { 
  this.firstName = firstName; 
  this.email = email; 
  button.onclick = function() { 
   // ce 'this' fait référence au bouton,
   // et non à une instance de Personne.
   sendEmail(this.email); 
  } 
 } 
}

Comme vous le voyez en commentaire, le this de la ligne 8 ne fait pas référence à l’instance de Person mais au bouton sur lequel l’utilisateur a cliqué. Or, c’est le contraire que nous souhaitons, nous voulons avoir accès au mail de la personne, pas au bouton ! Les développeurs JavaScript ont donc pensé à utiliser une variable intermédiaire à l’extérieur du contexte de la fonction, souvent nommé that, comme ceci :

class Person { 
 constructor(firstName, email, button) { 
  this.firstName = firstName; 
  this.email = email;
  // 'this' fait référence ici à l'instance de Personne 
  var that = this; 
    
  button.onclick = function() {
   // 'that' fait référence à la même instance de Personne 
   sendEmail(that.email); 
  } 
 } 
}

Cette fois-ci, nous obtenons le comportement souhaité, mais avouez que ce n’est pas très élégant.

C’est là que les arrows functions entrent en scène. Nous pouvons écrire la fonction onclick comme ceci :

button.onclick = () => { sendEmail(this.email); }

Les arrow functions ne sont donc pas tout à fait des fonctions classiques, parce qu’elles ne définissent pas un nouveau contexte comme les fonctions traditionnelles. Nous les utiliserons beaucoup dans le cadre de la programmation asynchrone qui nécessite beaucoup de fonctions anonymes.

C’est également pratique pour les fonctions qui tiennent sur une seule ligne :

someArray = [1, 2, 3, 4, 5]; 
let doubleArray = someArray.map((n) => n*2); 
console.log(doubleArray); // [2, 4, 6, 8, 10]

La fonction map de JavaScript permet d’appliquer un traitement à chaque élément d’un tableau grâce à une fonction passé en paramètre.

Pour reprendre l’exemple avec les promesses, on peut écrire ça :

// Un traitement asynchrone en quelques lignes !
getUser(userId) 
 .then(user => getFriendsList(user)) 
 .then(friends => showFriends(friends));