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:
On peut également définir la fonction en se servant d'une fonction anonyme comme ceci:
Voyons maintenant comment définir la même fonction à l'aide d'une écriture fléchée:
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:
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:
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.

Les fonctions fléchées en vidéo