Apprendre Javascript pour rendre vos pages Web interactives

Auteur: Mohamed CHINY Durée necessaire pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Niveau recommandé pour le cours de Apprendre Javascript pour rendre vos pages Web interactives Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz disponible pour ce cours

Page 28: Fonctions fléchées (Arrow function)

Toutes les pages

Les fonctions fléchées en Javascript (Arrow function)

L'une des nouveautés d'ECMAScript 2015 (ES6)

ECMAcript (ou ES) est un standard auquel les langages de type script qui s’exécutent au côté client doivent se conformer afin d’assurer l’interopérabilité ou la compatibilité avec les différents navigateurs. L’ECMAScript est implémenté dans différents langages comme Javascript, Jscript, ou Action script.

Il existe de nombreuses version d’ECMAScript. Depuis 2015, une nouvelle version est publiée presque chaque année. Cependant, la version 6 d’ECMAcript (dite ES6) connue aussi sous le nom ECMAcript 2015 marque un tournant important des langages qui implémentent ce standard, en particulier le Javascript. En effet, ES6 a apporté de nouvelles fonctionnalités très intéressantes qui ont radicalement changé la façon de penser son code, comme l’avènement des classes ou le traitement asynchrone via les promesses, l’invocation de nouveaux types pour les variables, de nouvelles fonctions mathématiques et méthodes qui s’appliquent au tableaux etc. En revanche, d’autres améliorations n’ont touché que la manière avec laquelle la syntaxe peut être présentée, on parle d’ailleurs de la méthode moderne de coder en Javascript. Parmi ces améliorations on trouve les fonctions fléchées.

Simplifier l'écriture des fonctions en Javascript à l'aide de fonctions fléchées

Une fonction fléchée (ou Arrow function) est une fonction exprimée de manière simplifiée afin de faciliter son écriture. D'ailleurs, une écriture aussi simple encourage les développeurs à imbriquer des fonctions dans d'autres fonctions ou les passer en guise d'arguments à d'autres fonctions comme c'est le cas des fonctions de rappel (ou callback function).

Comment exprimer une fonction fléchée?

Supposons que l'on veut créer une fonction nommée myFunc() est qui est sensée retourner le message "Bonjour". La méthode la plus classique et que nous avons vue dans la leçon dédiées aux fonctions en Javascript est la suivante:
function myFunc(){
   return "Bonjour";
}
On peut également définir la fonction en se servant d'une fonction anonyme comme ceci:
myFunc=function(){
   return "Bonjour";
}
Voyons maintenant comment définir la même fonction à l'aide d'une écriture fléchée:
myFunc=()=>"Bonjour"
Et oui, c'est aussi simple que ça!
L'origine du mot "fléchée" vient de la flèche (=>) placée entre le bloc d'arguments et le corps de la fonction. En tout cas, vous avez constaté que notre fonction est devenue tellement simple à tel point qu'elle peut être écrite sur une seule ligne tout en étant claire et facilement lisible.

Expliquons un peu comment ça se passe:

Tout d'abord, on nomme notre fonction (myFunc dans ce cas), puis on lui affecte l'expression de la fonction exactement comme la fonction anonyme vue juste avant, sauf qu'on retire le mot "function" et on ne conserve que les parenthèses. Ensuite on place notre fameuse flèche (=>) suivie du corps de la fonction. Dans ce cas, la fonction ne contient qu'une seule instruction qui retourne le message "Bonjour", donc, on peut éliminer les accolades et aussi le terme return. Le moteur Javascript comprend alors que la chaîne de caractères "Bonjour" est une valeur de retour.

Maintenant, imaginons que le message à retourner est passé en argument (que l'on nommera arg dans ce cas), alors notre fonctions pourrait s'écrire de deux manières différentes:
// On conserve les parenthèse:

myFunc=(arg)=>arg


// On élimine les parenthèse en raison de la présence d'un seul argument

myFunc=arg=>arg
Donc, si on n'a qu'un seul argument, alors on peut éliminer les parenthèses sans que cela n'affecte la syntaxe.

Regardons maintenant ce code:
myFunc=(message,nbr)=>{
   var valeur_de_retour="";
   for(let i=0;i<nbr;i++)
      valeur_de_retour+=message+" ";
   return valeur_de_retour;
}
Dans ce cas, en raison de la présence de plusieurs instructions dans le corps de la fonction, alors les accolades qui délimitent ce dernier sont obligatoires. Nous avons également plus d'un argument, alors on doit expliciter les parenthèses pour accueillir ces derniers. En tout cas, la fonction que l'on vient de déclarer retournera une chaine de caractères constituée du message passé en argument répété nbr fois.
La concaténation avec l'espace (+" ") située après la variable message a pour but d'éviter que les chaînes à afficher soient collées les unes aux autres.

Les fonctions fléchées en vidéo