Les fonctions de rappel, ou "callback" en anglais, sont un concept fondamental en JavaScript. Elles permettent à une fonction d'accepter une autre fonction en tant que paramètre et de l'appeler à un moment ultérieur dans le code.

Dans cet article, nous allons expliquer ce qu'est une fonction de rappel en JavaScript. Elles sont intensivement utilisées dans un code JavaScript, et illustrent pourquoi le langage considère les fonctions comme des citoyens de première classe [lien].

Qu'est-ce qu'une fonction de rappel ?

En JavaScript, une fonction de rappel est une fonction passée en tant que paramètre à une autre fonction. La fonction qui accepte le paramètre de rappel peut ensuite appeler plus tard la fonction de rappel, généralement lorsque certaines conditions sont remplies. C'est une façon de dire à une fonction : "rappelle-moi à ce numéro lorsque tu auras fini".

Les fonctions de rappel sont souvent utilisées dans les situations suivantes :

Événements : lorsque l'utilisateur clique sur un bouton ou qu'une animation est terminée, une fonction de rappel peut être utilisée pour effectuer une action en réponse à cet événement.
Asynchronisme : lorsqu'une fonction est appelée de manière asynchrone, une fonction de rappel peut être utilisée pour gérer la réponse de la fonction appelée. Par exemple l'appel à une API ou le retour d'une requête SQL adressée à une base de donnée. [lien vers article asynchrone]
Traitement des tableaux : lorsqu'une fonction doit être appliquée à chaque élément d'un tableau, une fonction de rappel peut être utilisée pour définir cette fonction.

Exemple de code avec une callback

Voici un exemple simple pour illustrer l'utilisation des fonctions de rappel en JavaScript. Supposons que nous ayons un tableau de nombres et que nous voulions ajouter 1 à chaque nombre et stocker le résultat dans un nouveau tableau. Nous pouvons utiliser la fonction map() pour cela, qui prend une fonction de rappel en tant que paramètre et applique cette fonction à chaque élément du tableau.

const numbers = [1, 2, 3, 4, 5];
 
const addOne = (number) => {
  return number + 1;
};
 
const newNumbers = numbers.map(addOne);
 
console.log(newNumbers);
// Output: [2, 3, 4, 5, 6]

Dans cet exemple, nous avons créé une fonction addOne() qui prend un nombre en tant que paramètre et retourne ce nombre plus un. Nous avons ensuite appelé la fonction map() sur le tableau numbers en passant la fonction addOne en tant que paramètre de rappel. La fonction map() a appliqué la fonction addOne() à chaque élément du tableau numbers et stocké le résultat dans un nouveau tableau appelé newNumbers. Le résultat final est un tableau qui contient chaque nombre de numbers plus un.

Remarquez au passage que le fonction addOne() est pure. Cela signifie que la valeur retournée ne dépend que du paramètre sans le modifier. Combinée à la fonction map(), cela créé un nouveau tableau newNumbers sans modifier le tableau numbersexistant. Ce concept d'immutabilité, consistant à copier plutôt que de modifier, permet de réduire les risques de bugs. Il est recommandé en JavaScript car le langage implémente un système automatique libérant la mémoire lorsque des objets ne sont plus utilisés : le garbage collector [lien].

Attention à la cascade infernale

Les fonctions de rappel sont un concept important en JavaScript et sont utilisées à peu près partout. En utilisant des fonctions de rappel les plus pures possible, le code est plus modulaire et plus facile à lire.

Cependant, pour les mécanismes asynchrones qui s'enchaînent, on se retrouve parfois confronté à la cascade infernale des rappels : une fonction sollicite une fonction de rappel, qui doit appeler une autre fonction de rappel, etc...

Pour résoudre ce problème, on utilisera le mécanisme async/await [lien] permettant d'enchaîner des appels asynchrones de façon plus lisible.

Les closures Async/await