Quand et pourquoi cela vaut la peine d'utiliser les fonctions fléchées ES6, et quand ce n'est pas le cas

Bonjour, Habr! Je vous présente la traduction de l'article " Quand (et pourquoi) vous devriez utiliser les fonctions fléchées ES6 - et quand vous ne devriez pas " par Cynthia Lee.

Les fonctions fléchées sont la fonction ES6 la plus populaire. Il s'agit d'une nouvelle façon concise d'écrire des fonctions.

function timesTwo(params) { return params * 2 } timesTwo(4); // 8 

Maintenant la même chose avec la fonction flèche.

 var timesTwo = params => params * 2 timesTwo(4); // 8 

Beaucoup plus court! Nous pouvons omettre les accolades et l'instruction return (s'il n'y a pas de bloc, mais plus à ce sujet plus tard).

Voyons comment la nouvelle méthode diffère de la méthode habituelle.

Syntaxe

La première chose que vous remarquerez rapidement est les différentes variantes de syntaxe. Regardons les principaux:

1. Sans paramètres

Si la fonction n'a pas de paramètres, vous pouvez simplement écrire des parenthèses vides avant =>

 () => 42 

En fait, vous pouvez vous passer du tout de supports!

 _ => 42 

1. Un paramètre

Les parenthèses sont également facultatives

 x => 42 || (x) => 42 

3. Plusieurs paramètres

Ici, nous avons besoin de parenthèses

 (x, y) => 42 

4. Instructions

Habituellement, une expression fonctionnelle renvoie une valeur, tandis qu'une instruction est responsable de l'action.

Il faut se rappeler que dans le cas des fonctions fléchées, si nous avons un ensemble d'actions / instructions, nous devons utiliser des accolades et l'instruction return.
Voici un exemple de fonction de flèche utilisée avec l'instruction if:

 var feedTheCat = (cat) => { if (cat === 'hungry') { return 'Feed the cat'; } else { return 'Do not feed the cat'; } } 

5. Le corps du bloc fongique

Même si votre fonction renvoie simplement des valeurs, mais que son corps est entre crochets, l'instruction return est requise.

 var addValues = (x, y) => { return x + y } 

6. Littéral d'objet

Si la fonction renvoie un objet littéral, il doit être placé entre parenthèses.

 x =>({ y: x }) 

Fonctions fléchées - Anonyme

Notez que les fonctions fléchées sont anonymes, elles n'ont pas de nom.

Cela crée des difficultés:

1. Difficile à avilir
   
   Dans ce cas, vous ne pourrez pas suivre le nom de la fonction et le numéro de ligne où l'erreur s'est produite.
   
2. Ne peut pas être affecté à une variable
   
   Si vous avez besoin d'un lien à l'intérieur de la fonction vers elle-même pour quelque chose (récursivité, un gestionnaire d'événements qui doit être annulé), rien ne fonctionnera
   

Avantage principal: non

Dans les fonctions normales, cela indique le contexte dans lequel cette fonction est appelée. celle de la fonction flèche est la même que celle de l'environnement dans lequel la fonction flèche est déclarée.

Par exemple, regardez la fonction setTimeout ci-dessous:

 // ES5 var obj = { id: 42, counter: function counter() { setTimeout(function() { console.log(this.id); }.bind(this), 1000); } }; 

Dans l'exemple ci-dessus, vous devez utiliser .bind (this) pour passer le contexte à la fonction. Sinon, cela ne sera pas défini.

 // ES6 var obj = { id: 42, counter: function counter() { setTimeout(() => { console.log(this.id); }, 1000); } }; 

Dans cet exemple, vous n'avez pas besoin de le lier. La fonction flèche prendra cela de la fermeture.

Quand utiliser les fonctions fléchées

Maintenant, je pense qu'il est devenu clair que les fonctions fléchées ne remplacent pas les fonctions ordinaires.

Voici quelques exemples où il est peu probable que vous souhaitiez les utiliser.

1. Méthodes d'objet

Lorsque vous appelez cat.jumps, le nombre de vies ne diminue pas. En effet, cela n'est lié à rien et hérite de la valeur de la fermeture.

 var cat = { lives: 9, jumps: () => { this.lives--; } } 

2. Fonctions de rappel avec contexte dynamique

Si vous avez besoin d'un contexte dynamique, une fonction de flèche est une mauvaise option.

 var button = document.getElementById('press'); button.addEventListener('click', () => { this.classList.toggle('on'); }); 

Si nous cliquons sur le bouton, nous obtenons une TypeError. C'est parce que ce n'est pas lié à un bouton.

3. Quand la lisibilité du code empire

Avec les fonctions habituelles, il est toujours clair ce que vous vouliez dire. Avec les pointes de flèche, étant donné les options de syntaxe variées, certaines choses deviennent moins évidentes.

Quand cela vaut-il la peine d'utiliser les fonctions fléchées

Les fonctions fléchées sont idéales pour les cas où vous n'avez pas besoin de votre propre contexte de fonction.

J'aime aussi beaucoup utiliser les fonctions fléchées dans toutes sortes de map et reduce - le code se lit mieux de cette façon.