In this French tutorial, the instructor introduces JavaScript callback functions as higher‑order functions that can be passed as arguments or returned. He explains why callbacks are central to asynchronous programming and shows common built‑in APIs that rely on them, such as addEventListener and setTimeout. Through live code examples, he demonstrates the pitfall of passing a named function directly (which causes immediate execution) and the correct pattern of wrapping the call in an anonymous function so the callback runs at the intended moment. He then builds a generic `operation` function that receives a numeric value and a callback (either a sum or product function), illustrating how callbacks make code reusable and configurable. The same examples are rewritten with arrow‑function syntax for brevity. Finally, he warns about “callback hell,” where excessive nesting of callbacks makes code hard to read, and notes that more advanced asynchronous patterns will be covered later. The lesson is purely instructional, aiming to make learners aware of callbacks, their proper usage, and common pitfalls.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle leçon de JavaScript. Aujourd'hui nous allons voir les fonctions de rappel ou fonctions de callback. Comme vous le savez déjà, les fonctions ont une grande importance en JavaScript. En effet, la grande majorité des traitements que l'on demande au moteur JavaScript d'exécuter sont englobés dans des fonctions qui attendent le moment propice pour s'exécuter. En JavaScript, et comme c'est le cas pour d'autres langages de programmation, les Les fonctions sont des entités d'ordre supérieur ou de classe supérieure. De telles fonctions permettent d'abstraire les valeurs et les actions, c'est-à-dire qu'ils peuvent accepter des fonctions en guise d'arguments au même titre que des variables, et ils peuvent aussi retourner des fonctions. Une fonction passée en argument d'une autre fonction est appelée fonction de rappel ou callback. Les callbacks sont très utilisés en JavaScript, d'autant plus avec la méthode moderne de programmation qui a été marquée par l'implémentation d'ECMAScript ainsi que la prise en charge de la programmation asynchrone via des techniques comme les promesses. D'ailleurs, les callbacks sont pris en charge de manière systématique dans de nombreuses fonctionnalités prédéfinies en JavaScript. Leur utilisation est d'autant plus fréquente dans l'environnement d'exécution Node.js où on est souvent amené à faire un traitement après qu'un autre soit achevé, comme le fait d'afficher le contenu d'un fichier après que ce dernier soit chargé. Prenons ce code que nous avons traité la dernière fois. Nous avons programmé le gestionnaire d'évènement clic sur un bouton et une fois détecté, une action sera exécutée. On va quand même le modifier légèrement. On mettra ici addEventListener qui accueille 3 arguments. Le premier, c'est une chaîne de caractères qui indique quel est l'événement attendu. On mettra clic. Le deuxième argument, c'est une fonction qui sera appelée au moment du clic. Et le dernier argument est un booléen. On mettra par exemple false pour dire que l'on veut récupérer les événements dans le flux bouillonnement ou bien bubbling comme on a vu avant. Mais c'est facultatif, alors on peut le retirer. Maintenant on déclare la fonction f. Il va tout simplement afficher un message à la console. Exécutons. On constate que le message OK est affiché avant même de cliquer sur le bouton et c'est tout à fait naturel. En fait, dans ce genre de situation, le JavaScript n'évalue pas l'événement pour exécuter la fonction. Alors une fois il détecte la présence de l'appel, il l'exécute aussitôt. Alors que l'idée même, c'est d'attendre jusqu'à ce que l'utilisateur clique sur le bouton pour exécuter celle-ci. Pour régler ce problème, on va placer ici une fonction anonyme. Cette fonction, c'est elle qui va se charger d'appeler la fonction f. Réexécutons. Maintenant, on voit que ça marche, c'est-à-dire que la fonction f est exécutée réellement après le clic sur le bouton. Ce qu'il faut retenir dans ce code, c'est 2 choses. La première chose déjà, c'est que addEventListener est une méthode qui fait partie de l'objet document, c'est-à-dire c'est une fonction. Et dans cette même fonction, on a passé plusieurs arguments, y compris notre fonction. Dans ce cas, cette fonction, c'est une fonction de rappel, c'est-à-dire que jusqu'ici, quand nous nous servons de addEventListener, en fait on se sert de fonctions de callback sans même nous en rendre compte. La deuxième chose, c'est que pour que la fonction de callback soit exécutée au moment propice, c'est-à-dire dans ce cas au moment du clic sur le bouton, Alors il faut qu'il soit anonyme de cette manière, c'est-à-dire si vous mettez le nom de la fonction direct, il sera exécuté directement au moment où le moteur JavaScript interprète le code. D'ailleurs c'est la même histoire pour le temporisateur qu'on va programmer ici avec la méthode setTimeout. Le premier argument c'est la fonction à exécuter, on mettra la même f de cette manière. Deuxième argument c'est la durée d'attente, on mettra 1000 millisecondes ou bien une seconde. Dans ce cas, on imagine que quand j'aurai actualisé la page, la fonction f sera appelée après 1 seconde. Mais c'est pas ce qui va arriver. Regardez encore. La fonction f est appelée avant même l'expiration du délai. Et c'est pour la même raison. Parce que la fonction f, vu la manière avec laquelle elle est déclarée, elle est appelée directement par le moteur d'exécution JavaScript. Alors l'astuce c'est la même. En fait, il y a 2 façons de faire. Soit on met la fonction entre des doubles quotes. Dans ce cas elle sera évaluée en tant que fonction et ça devrait marcher. Alors on attend une seconde et le message OK est affiché. Mais cette méthode c'est un peu déconseillé. Par contre la meilleure solution c'est une fonction anonyme encore. Comme ça, réexécutons. On attend une seconde et le message est affiché. Alors là aussi c'est bien. Encore une chose c'est que setTimeout c'est une méthode de l'objet window. C'est-à-dire c'est une fonction et en guise d'argument elle accepte une autre fonction. Alors dans ce cas aussi, ça c'est une fonction de rappel ou bien un callback. C'est-à-dire que nous avons très souvent utilisé les fonctions de callback jusqu'ici. Maintenant créons un autre exemple. Supposons que l'on veut créer 2 fonctions, une qui va faire la somme de 2 nombres et une qui va faire le produit de ces nombres-là. On va les appeler par exemple somme qui va accueillir un argument qu'on appellera a et qui va retourner a+ a, c'est-à-dire on va additionner les mêmes nombres. Deuxième fonction qu'on appellera produit qui va accueillir aussi un argument qu'on appellera aussi a et qui va retourner le produit. Maintenant on déclare une troisième fonction qui s'appelle opération et qui va accueillir 2 arguments. Le premier argument, c'est le nombre que l'on veut engager dans l'opération. On mettra par exemple toujours 1 si vous voulez. Et le deuxième argument, dans ce cas, c'est un callback, c'est-à-dire c'est une fonction que l'on va appeler. Vous avez deviné que cette fonction s'agira soit de produit ou bien de somme. Alors on note juste le nom de la fonction sans mettre les parenthèses ni rien d'autre. Ce qu'il va nous retourner, c'est le résultat de l'opération. Représentée par la fonction callback, à laquelle on passe l'argument a. Maintenant appelons la fonction operation et on va lui passer 2 arguments. Le premier c'est le number que l'on veut engager dans l'opération, dans ce cas 5, et le deuxième argument c'est la fonction que l'on souhaite exécuter dans celle-ci en guise de callback. On mettra par exemple somme, cette fonction que nous avons déjà déclarée. Le résultat qui sera retourné, on va l'afficher dans la console. En exécutant, on obtient 10 qui est la somme de 5+ 5. De la même manière, au moment de l'appel, on peut passer la fonction produit et on obtient 25. Alors, vous avez encore constaté que la fonction operation accueille 2 arguments. L'un d'entre eux est une fonction de callback ou bien une fonction de rappel. C'est au moment de l'appel de la fonction operation que l'on décide quelle fonction on veut vraiment exécuter. Est-ce que c'est somme ou bien produit? Ça permet bien sûr de rendre le code plus maniable, c'est-à-dire que dans cette fonction on va pas fixer l'opération que l'on souhaite effectuer, mais on va donner la main au développeur de choisir s'il veut exécuter produit ou bien somme en la passant en guise d'argument. Bien entendu, souvent on a un ensemble de traitements que l'on veut exécuter avant d'appeler la fonction callback parce que c'est l'idée même du callback, c'est-à-dire qu'il est exécuté généralement à la fin d'un traitement pour qu'il aurait forcément besoin de ressources qui seront calculées au préalable. Encore une chose, on va maintenant réécrire ce code avec les fonctions fléchées pour qu'il soit plus abrégé. Alors là on mettra somme=, on a une seule ligne avec le return, on peut retirer ça aussi. On mettra ici une flèche, ça signifie qu'on a créé une fonction qui s'appelle somme qui accueille un seul argument a. Qui va retourner a+ 1. Même chose ici, voilà. Et aussi pour la fonction operation. Dans ce cas, operation contient 2 arguments, donc on va laisser les parenthèses, on mettra la flèche. Il y a une seule instruction avec le return, on va la mettre sur une seule ligne. On n'oublie pas le égal. Exécutons. On obtient 25 et si on appelle somme, on obtient 10. Il convient de rappeler qu'il existe un phénomène connu sous le nom de callback hell ou enfer de fonctions de rappel qui se produit quand on abuse de l'usage des fonctions de rappel de tel point à appeler un callback dans un ordre callback et ainsi de suite, ce qui rend nos codes très difficiles à lire. À la fin, notez que l'objectif de cette leçon consiste seulement à évoquer l'existence de fonctions de callback en JavaScript, mais leur vraie utilité sera traitée prochainement. Merci pour votre attention et à la vidéo prochaine.
