Fonctions fléchées, les bases

Il existe une autre syntaxe très simple et concise pour créer des fonctions, qui est souvent meilleure que les expressions de fonction.

C'est ce qu'on appelle « fonctions fléchées », car cela ressemble à ceci :

 let func = (arg1, arg2, ..., argN) => expression ;

Cela crée une fonction func qui accepte les arguments arg1..argN , puis évalue l' expression du côté droit avec leur utilisation et renvoie son résultat.

En d’autres termes, c’est la version plus courte de :

 let func = fonction (arg1, arg2, ..., argN) {
  expression de retour ;
} ;

Voyons un exemple concret :

 soit somme = (a, b) => a + b;

/* Cette fonction fléchée est une forme plus courte de :

soit somme = fonction (a, b) {
  renvoyer a + b ;
} ;
*/

alerte( somme(1, 2) ); // 3

Comme vous pouvez le voir, (a, b) => a + b signifie une fonction qui accepte deux arguments nommés a et b . Lors de l'exécution, il évalue l'expression a + b et renvoie le résultat.

• Si nous n’avons qu’un seul argument, les parenthèses autour des paramètres peuvent être omises, ce qui les rend encore plus courtes.

  Par exemple:

   soit double = n => n * 2 ;
  // à peu près la même chose que : let double = function(n) { return n * 2 }
  
  alerte( double(3) ); // 6

• S'il n'y a pas d'arguments, les parenthèses sont vides, mais elles doivent être présentes :

   let sayHi = () => alert("Bonjour !");
  
  disBonjour();

Les fonctions fléchées peuvent être utilisées de la même manière que les expressions de fonction.

Par exemple, pour créer dynamiquement une fonction :

 let age = prompt("Quel âge as-tu ?", 18);

laissez bienvenue = (âge < 18) ?
  () => alert('Bonjour !') :
  () => alert("Salutations !");

accueillir();

Les fonctions fléchées peuvent sembler peu familières et peu lisibles au début, mais cela change rapidement à mesure que les yeux s'habituent à la structure.

Ils sont très pratiques pour les actions simples sur une seule ligne, lorsque nous sommes tout simplement trop paresseux pour écrire beaucoup de mots.

Fonctions de flèche multiligne

Les fonctions fléchées que nous avons vues jusqu'à présent étaient très simples. Ils ont pris les arguments à gauche de => , les ont évalués et ont renvoyé l'expression de droite avec eux.

Parfois, nous avons besoin d’une fonction plus complexe, avec plusieurs expressions et instructions. Dans ce cas, nous pouvons les mettre entre accolades. La principale différence est que les accolades nécessitent un return à l'intérieur pour renvoyer une valeur (tout comme le fait une fonction normale).

Comme ça:

 let sum = (a, b) => { // l'accolade ouvre une fonction multiligne
  soit le résultat = a + b ;
  renvoyer le résultat ; // si nous utilisons des accolades, alors nous avons besoin d'un "retour" explicite
} ;

alerte( somme(1, 2) ); // 3

Plus à venir

Ici, nous avons loué les fonctions fléchées pour leur brièveté. Mais ce n'est pas tout !

Les fonctions fléchées ont d’autres fonctionnalités intéressantes.

Pour les étudier en profondeur, nous devons d'abord connaître certains autres aspects de JavaScript, nous reviendrons donc sur les fonctions fléchées plus tard dans le chapitre Les fonctions fléchées revisitées.

Pour l'instant, nous pouvons déjà utiliser les fonctions fléchées pour les actions et les rappels sur une seule ligne.

Résumé

Les fonctions fléchées sont pratiques pour les actions simples, en particulier pour les one-liners. Ils existent en deux saveurs :

1. Sans accolades : (...args) => expression – le côté droit est une expression : la fonction l'évalue et renvoie le résultat. Les parenthèses peuvent être omises s'il n'y a qu'un seul argument, par exemple n => n*2 .

2. Avec des accolades : (...args) => { body } – les parenthèses nous permettent d'écrire plusieurs instructions à l'intérieur de la fonction, mais nous avons besoin d'un return explicite pour renvoyer quelque chose.

Tâches

Réécrire avec les fonctions fléchées

Remplacez les expressions de fonction par des fonctions fléchées dans le code ci-dessous :

 fonction demander (question, oui, non) {
  if (confirmer(question)) oui();
  sinon non();
}

demander(
  "Êtes-vous d'accord?",
  function() { alert("Vous avez accepté."); },
  function() { alert("Vous avez annulé l'exécution."); }
);

solution

 fonction demander (question, oui, non) {
  if (confirmer(question)) oui();
  sinon non();
}

demander(
  "Êtes-vous d'accord?",
  () => alert("Vous avez accepté."),
  () => alert("Vous avez annulé l'exécution.")
);

Ça a l’air court et propre, non ?