Fonctions Callback en JavaScript

Les fonctions callbacks sont une excellentes façon de gérer l’exécution d’une fonction après que l’exécution d’une autre fonction ait été complété. Si nous voulons exécuter une fonction juste après le retour d’une autre fonction, alors les Callbacks peuvent être utilisés.
 
 

Fonction Callback

Une fonction de retour (callback) est une fonction qui est transmise en tant qu’argument à une autre fonction pour être « rappelée » ultérieurement. Une fonction qui accepte d’autres fonctions en tant qu’arguments est appelée une fonction d’ordre supérieur, qui contient la logique à partir de laquelle la fonction callback est exécutée. C’est la combinaison de ces deux éléments qui nous permet d’étendre nos fonctionnalités.

Pour illustrer les callbacks, voir l’exemple ci-dessous:

function sayWelcomTo(msg, callback){ 
  var message = "Hello, Welcom to " + msg;
  callback(message); 
}

function displayMsg(msg){
  console.log(msg);
}

sayWelcomTo("WayToLearnX.com!", displayMsg);

Sortie :

Hello, Welcom to WayToLearnX.com!

Dans l’exemple ci-dessus, « sayWelcomTo » est la fonction d’ordre supérieur, qui accepte deux arguments, le second étant le callback. La fonction displayMsg est transmise en tant que fonction callback. Lorsque nous exécutons la fonction sayWelcomTo, notez que nous n’ajoutons pas de parenthèses à la fonction displayMsg lorsque nous la transmettons en tant qu’argument. En effet, nous ne voulons pas exécuter notre fonction callback immédiatement, nous voulons simplement transmettre la définition du fonction « displayMsg » à la fonction d’ordre supérieur « sayWelcomTo » afin qu’elle puisse être exécutée ultérieurement.
 

sayWelcomTo("WayToLearnX.com!", function(msg){ 
    console.log(msg); 
});

Vous étes pas obligé à utiliser le mot « callback » comme nom de votre argument, Javascript doit simplement savoir que c’est le nom correct de l’argument. Sur la base de l’exemple ci-dessus, la fonction ci-dessous se comportera exactement de la même manière.

function sayWelcomTo(msg, functionName){ 
  var message = "Hello, Welcom to " + msg;
  functionName(message); 
}

function displayMsg(msg){
  console.log(msg);
}

sayWelcomTo("WayToLearnX.com!", displayMsg);