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

Leçon 29: Fonctions de rappel (Callback function)

Toutes les leçons

Apprendre Javascript pour rendre vos pages Web interactives

Leçon 1
Javascript c'est quoi?
Leçon 2
Comment intégrer du code Javascript?
Leçon 3
Pour commencer: les bases du Javascript
Leçon 4
Les bases du Javascript (La suite)
Leçon 5
Structures de contrôle (conditions et boucles)
Leçon 6
Les fonctions
Leçon 7
Les événements en Javascript
Leçon 8
Objets, méthodes et attributs
Leçon 9
Exercices - Permutation et calculatrice
Leçon 10
Objet Array: les tableaux
Leçon 11
Objet String: chaînes de caractères
Leçon 12
Exercice - Contrôle de saisie en Javascript
Leçon 13
Objet Math
Leçon 14
Objet Date
Leçon 15
Objet RegExp: Les expressions régulières
Leçon 16
Objet window
Leçon 17
Exercice - Afficher un message lettre par lettre
Leçon 18
Objet screen
Leçon 19
Objet Document et DOM en Javascript (Partie 1)
Leçon 20
Objet Document et DOM en Javascript (Partie 2)
Leçon 21
Objet Document et DOM en Javascript (Partie 3)
Leçon 22
Objet event
Leçon 23
Gestion des exceptions
Leçon 24
Exercice - Album photo
Leçon 25
API Selectors
Leçon 26
Exercice - Réaliser un jeu de loterie avec Javascript
Leçon 27
Exercice - Réaliser un album photo à effet de vagues (ou domino)
Leçon 28
Fonctions fléchées (Arrow function)
Leçon 29
Fonctions de rappel (Callback function)
Leçon 30
Types primitifs, non primitifs et notion du prototype
Leçon 31
Objets personnalisés en Javascript
Leçon 32
Classes et héritage
Leçon 33
Les promesses - Objet Promise
Leçon 34
Gérer les promesses avec une fonction asynchrone - async et await

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



Leçon 6
Les fonctions
Leçon 13
Objet Math
Leçon 14
Objet Date
Leçon 16
Objet window
Leçon 18
Objet screen
Leçon 22
Objet event
Leçon 25
API Selectors
Leçon 29
Fonctions de rappel (Callback function)