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

Cet article donne une brève introduction au concept et à l'utilisation des fonctions de rappel dans le langage de programmation JavaScript.

Les fonctions sont des objets

La première chose que nous devons savoir est qu'en Javascript, les fonctions sont des objets de première classe. En tant que tel, nous pouvons travailler avec eux de la même manière que nous travaillons avec d'autres objets, comme les assigner à des variables et les passer en tant qu'arguments dans d'autres fonctions. C'est important, car c'est cette dernière technique qui nous permet d'étendre les fonctionnalités de nos applications.

Fonctions de rappel

Une fonction de rappel est une fonction qui est passée en argument à une autre fonction, pour être «rappelée» ultérieurement. Une fonction qui accepte d'autres fonctions comme arguments est appelée une fonction d'ordre supérieur , qui contient la logique du moment où la fonction de rappel est exécutée. C'est la combinaison de ces deux qui nous permet d'étendre nos fonctionnalités.

Pour illustrer les rappels, commençons par un exemple simple:

function createQuote(quote, callback){ var myQuote = "Like I always say, " + quote; callback(myQuote); // 2 } function logQuote(quote){ console.log(quote); } createQuote("eat your vegetables!", logQuote); // 1 // Result in console: // Like I always say, eat your vegetables!

Dans l'exemple ci-dessus, createQuoteest la fonction d'ordre supérieur, qui accepte deux arguments, le second étant le rappel. La logQuotefonction est utilisée pour passer en tant que notre fonction de rappel. Lorsque nous exécutons la createQuotefonction (1) , notez que nous n'ajoutons pas de parenthèses logQuotelorsque nous la passons en argument. C'est parce que nous ne voulons pas exécuter notre fonction de rappel tout de suite, nous voulons simplement transmettre la définition de la fonction à la fonction d'ordre supérieur afin qu'elle puisse être exécutée plus tard.

De plus, nous devons nous assurer que si la fonction de rappel que nous transmettons attend des arguments, nous fournissons ces arguments lors de l'exécution du callback (2) . Dans l'exemple ci-dessus, ce serait la callback(myQuote);déclaration, car nous savons que cela logQuotes'attend à ce qu'un devis soit transmis.

De plus, nous pouvons passer des fonctions anonymes sous forme de rappels. L'appel ci-dessous à createQuoteaurait le même résultat que l'exemple ci-dessus:

createQuote("eat your vegetables!", function(quote){ console.log(quote); });

Incidemment, vous n'avez pas besoin d'utiliser le mot «callback» comme nom de votre argument, Javascript a juste besoin de savoir que c'est le nom d'argument correct. Sur la base de l'exemple ci-dessus, la fonction ci-dessous se comportera exactement de la même manière.

function createQuote(quote, functionToCall) { var myQuote = "Like I always say, " + quote; functionToCall(myQuote); }

Pourquoi utiliser les fonctions de rappel?

La plupart du temps, nous créons des programmes et des applications qui fonctionnent de manière synchrone . En d'autres termes, certaines de nos opérations ne démarrent qu'après la fin des précédentes. Souvent, lorsque nous demandons des données à d'autres sources, comme une API externe, nous ne savons pas toujours quand nos données seront servies. Dans ces cas, nous voulons attendre la réponse, mais nous ne voulons pas toujours que l'ensemble de notre application s'arrête pendant que nos données sont extraites. Ces situations sont où les fonctions de rappel sont utiles.

Jetons un coup d'œil à un exemple qui simule une requête à un serveur:

function serverRequest(query, callback){ setTimeout(function(){ var response = query + "full!"; callback(response); },5000); } function getResults(results){ console.log("Response from the server: " + results); } serverRequest("The glass is half ", getResults); // Result in console after 5 second delay: // Response from the server: The glass is half full!

Dans l'exemple ci-dessus, nous faisons une demande fictive à un serveur. Après 5 secondes, la réponse est modifiée, puis notre fonction de rappel getResultsest exécutée. Pour voir cela en action, vous pouvez copier / coller le code ci-dessus dans l'outil de développement de votre navigateur et l'exécuter.

De plus, si vous êtes déjà familier avec setTimeout, vous avez toujours utilisé des fonctions de rappel. L'argument de fonction anonyme passé dans l' setTimeoutappel de fonction de l'exemple ci-dessus est également un rappel! Ainsi, le rappel d'origine de l'exemple est en fait exécuté par un autre rappel. Veillez à ne pas imbriquer trop de rappels si vous pouvez l'aider, car cela peut conduire à quelque chose appelé «l'enfer des rappels»! Comme son nom l'indique, ce n'est pas une joie à gérer.