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 29: Fonctions de rappel (Callback function)

Toutes les pages

Fonction de rappel ou de callback

Pourquoi les 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 exécuter sont englobés dans des fonctions qui attendent le moment propice pour s’exécuter.

En Javascript (est comme c’est le cas dans d’autres langage de programmation), 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’elles peuvent accepter des fonctions en guise d’arguments au même titre que les variables et elles peuvent aussi retourner des fonctions. Une fonctions passée en argument d’une autre fonction est appelée fonction de rappel ou callback function.

Les callback 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é.

Les fonctions de callback, on s'en servait déjà!

Quand nous avons mis en place un gestionnaire d'événements à l'aide de la méthode addEventListener() ou quand nous avons programmé un temporisateur à l'aide des méthodes setTimeout() ou setInterval(), nous leurs avons passé une fonction en guise d'arguments. Cette fonction là est en fait une fonction de rappel.
button=document.querySelector("button");
button.addEventListenenr("click",
   function(){
      console.log("Bouton cliqué");
   },
   false);
Dans l'exemple ci-dessus, nous avons mis en place un gestionnaire d'événements qui va détecter un click sur un éventuel bouton intégré en HTML, ensuite, il va associer à ce click une fonction anonyme qui affichera un message dans la console. Cette fonction anonyme est une fonction de callback.

En effet, la méthode addEventListener() est une fonction, et l'un de ces arguments est aussi une fonction. Par conséquent, cette dernière est, par définition, une fonction de rappel.

Callback hell ou Pyramid of doom

Il convient de rappeler qu’il existe un phénomène connu sous le nom de callback hell (ou enfer des fonctions de rappel) connu aussi sous Pyramid of doom qui se produit quand on abuse de l’usage des fonctions de rappel à tel point d’appeler un callback dans un autre callback et ainsi de suite, ce qui rend le code très difficile à lire. Donc, mieux vaut se servir des fonctions de callback dans le bon contexte plutôt que de les mettre en usage n'importe où.
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.

Les fonctions de rappel en vidéo