Dans cette leçon vidéo, l’instructeur présente les fonctions fléchées introduites avec ES6 (ECMAScript 2015) et montre comment elles modernisent l’écriture du code JavaScript. Après un bref rappel du rôle d’ECMAScript et des nouveautés d’ES6, il compare une fonction traditionnelle déclarée avec le mot‑clé function à sa version fléchée équivalente, en expliquant chaque modification syntaxique : suppression du mot‑clé, suppression du nom, utilisation de la flèche =>, gestion des parenthèses autour des paramètres, suppression des accolades et du mot‑clé return lorsqu’il n’y a qu’une instruction. Il illustre ces transformations avec des exemples concrets (affichage d’un message, passage d’un argument, calcul du carré d’un nombre) et montre les erreurs fréquentes (oubli du return avec des accolades). Ensuite, il montre comment remplacer les fonctions anonymes classiques utilisées dans les gestionnaires d’événements et dans setTimeout par des fonctions fléchées, en conservant ou en simplifiant les accolades selon le nombre d’instructions. La vidéo conclut en soulignant l’importance de maîtriser les fonctions fléchées pour travailler avec les promesses et les callbacks. Le ton est pédagogique, avec un enthousiasme visible pour la concision et la modernité apportées par les fonctions fléchées.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon qui fait partie de la série consacrée au JavaScript. Aujourd'hui, nous allons voir les fonctions fléchées. ECMAScript ou ES est un standard auquel les langages de type script qui s'exécutent 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 ActionScript. Il existe de nombreuses versions d'ECMAScript. Depuis 2015, une nouvelle version est publiée presque chaque année. Cependant, la version 6 d'ECMAScript dite ES6, connue aussi sous le nom ECMAScript 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 de traitements asynchrones via les promesses, l'invocation de nouveaux types pour les variables, nouvelles fonctions mathématiques et méthodes qui s'appliquent aux 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. Créons cette fonction. Il s'agit d'une déclaration classique qu'on a l'habitude de faire en JavaScript. Imaginez que je veux juste afficher le message bonjour dans la console. On appelle la fonction puis on exécute. Alors on a le message bonjour qui est bel et bien affiché. D'ailleurs on peut affecter cette fonction à une autre variable que j'appellerai g. Dans ce cas j'appellerai la fonction g et ça donnera le même résultat. Voilà. Maintenant pour écrire cette fonction de manière fléchée, voilà ce qu'on va faire. On va retirer le mot-clé function, on retire le nom de la fonction, on conserve les parenthèses, puis on place une flèche avec le symbole égal et le chevron supérieur. Quant au corps de la fonction, on n'y a pas touché. Maintenant quand on exécute, on obtient le même résultat. Alors là c'est une méthode qui permet d'écrire la fonction, qu'on appelle d'ailleurs fonction fléchée en raison de la présence de cette flèche. Maintenant imaginez qu'on veut passer un argument. Dans ce cas le message que je souhaite afficher c'est MSG. Il suffit de le passer à travers les parenthèses en guise d'argument que j'appellerai arg que je mets ici. Quand j'exécute j'obtiens MSG. Puisque la fonction contient un seul argument alors on peut retirer les parenthèses comme ça. On réexécute. On obtient le même résultat. Encore une chose, la fonction contient une seule ligne ou bien une seule instruction, alors on peut aussi retirer les accolades. Maintenant la fonction est écrite de manière abrégée comme ceci. Exécutons. On obtient le même résultat. Donc vous constatez que l'écriture de nos fonctions devient plus abrégée. Maintenant imaginez que je veux retourner une valeur. Par exemple, je voudrais retourner le carré d'un nombre que je passe en argument. Le nombre dans ce cas c'est 5. Je veux retourner son carré qui vaut 25 dans ce cas. Alors là il suffit de mettre arg fois arg tout simplement, même pas la peine de mettre le mot-clé return. Et bien sûr on va afficher le résultat dans la console comme ceci. On exécute et on obtient 25. Vous avez remarqué que la fonction devient vraiment très abrégée, c'est pourquoi on parle de la méthode moderne d'écrire du JavaScript. Mais si on met les accolades, dans ce cas ça va générer une erreur parce qu'il faut expliciter le mot-clé return. Regardons ce qui va se passer. Là ça donne undefined, c'est normal parce qu'on n'a rien retourné, donc il faut mettre return. Alors si votre fonction contient une seule instruction, pas la peine de mettre le mot-clé return, mais il faut retirer les accolades aussi. Sinon, c'est-à-dire si vous mettez des accolades ou que votre fonction contient beaucoup plus de lignes, dans ce cas il faudra expliciter le mot-clé return si vous comptez récupérer une valeur retournée par la fonction. Maintenant créons une fonction anonyme que l'on va associer au gestionnaire des événements. Autrement dit, quand on aura cliqué sur ce bouton, la fonction sera exécutée. Alors récupérons le bouton du DOM. C'est identifié par button.onclick. La méthode classique, on met une fonction anonyme comme ça. Ensuite, on écrit le code souhaité. Imaginez que je veux temporiser avant d'exécuter le code, je mettrai setTimeout. Là encore, je mettrai une fonction anonyme et je mettrai par exemple console.log .log OK et la durée c'est une seconde. Alors quand j'aurai cliqué sur le bouton, j'attendrai une seconde puis j'affiche le message OK dans la console. Oui, j'ai un petit souci, j'ai mal écrit document. Voilà, comme ça. Maintenant je clique, j'attends une seconde puis le message OK est affiché. Alors jusqu'ici c'est bien. Maintenant écrivons le code avec les fonctions fléchées. Déjà ici on va retirer le mot-clé function. On n'a pas d'arguments donc on mettra juste une flèche. Puisqu'on a plusieurs lignes dans le corps de la fonction donc on va conserver les accolades. Là encore on va retirer le mot-clé function. On mettra une flèche. Ici on n'a qu'une seule instruction, c'est-à-dire on peut retirer les accolades. Et voilà, notre code devient comme ça. Exécutons... et ça marche toujours. Donc il est très intéressant de maîtriser les fonctions fléchées parce que par la suite on en aura vraiment besoin, surtout quand on va faire le chaînage avec les promesses ou encore les callbacks. Merci pour votre attention et à la vidéo prochaine!
