En JavaScript, les fonctions sont généralement exécutées de manière séquentielle. Une fonction s'exécute dans l'ordre dans lequel vous l'appelez, et non dans l'ordre dans lequel vous la définissez.
Exemple :
// functions
function cat() {
console.log("This is a cat");
}
function dog() {
console.log("This is a dog.");
}
// function call
cat();
dog();
// output will be
// This is a cat.
// This is a dog.
La fonction que nous passons en argument à une autre fonction s’appelle une fonction de rappel.
Exemple :
function xyz(call){
call();
}
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
Le problème avec le premier exemple ci-dessus, c'est que vous devez appeler deux fonctions pour afficher le résultat.
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
Le problème avec ce deuxième exemple, c'est que vous ne pouvez pas empêcher la fonction
myCalculator d'afficher le résultat.
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, Callback) {
let sum = num1 + num2;
Callback(sum);
}
myCalculator(5, 5, myDisplayer);
Dans l’exemple ci-dessus, myDisplayer est le nom d’une fonction. Il est passé à myCalculator() en tant qu’argument.
<aside> ☝
Lorsque vous passez une fonction en argument, n'oubliez pas de ne pas utiliser de parenthèses.
</aside>
Correcte : myCalculator(5, 5, myDisplayer);
Faux : myCalculator(5, 5, myDisplayer());
<aside> 💡
Là ou les rappels brillent vraiment, ce sont dans les fonctions asynchrones, où une fonction doit attendre une autre fonction (comme attendre le chargement d’un fichier).
</aside>