Este artículo ofrece una breve introducción al concepto y uso de las funciones de devolución de llamada en el lenguaje de programación JavaScript.
Las funciones son objetos
Lo primero que debemos saber es que en Javascript, las funciones son objetos de primera clase. Como tal, podemos trabajar con ellos de la misma manera que trabajamos con otros objetos, como asignarlos a variables y pasarlos como argumentos a otras funciones. Esto es importante, porque es la última técnica la que nos permite extender la funcionalidad en nuestras aplicaciones.
Funciones de devolución de llamada
Una función de devolución de llamada es una función que se pasa como argumento a otra función, para ser "llamada de nuevo" en un momento posterior. Una función que acepta otras funciones como argumentos se denomina función de orden superior , que contiene la lógica para cuando se ejecuta la función de devolución de llamada. Es la combinación de estos dos lo que nos permite ampliar nuestra funcionalidad.
Para ilustrar las devoluciones de llamada, comencemos con un ejemplo 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!En el ejemplo anterior, createQuotees la función de orden superior, que acepta dos argumentos, el segundo es la devolución de llamada. La logQuotefunción se está utilizando para pasar como nuestra función de devolución de llamada. Cuando ejecutamos la createQuotefunción (1) , observe que no estamos agregando paréntesis logQuotecuando la pasamos como argumento. Esto se debe a que no queremos ejecutar nuestra función de devolución de llamada de inmediato, simplemente queremos pasar la definición de la función a la función de orden superior para que pueda ejecutarse más tarde.
Además, debemos asegurarnos de que si la función de devolución de llamada que pasamos espera argumentos, proporcionemos esos argumentos al ejecutar la devolución de llamada (2) . En el ejemplo anterior, esa sería la callback(myQuote);declaración, ya que sabemos que logQuoteespera que se pase una cita.
Además, podemos pasar funciones anónimas como devoluciones de llamada. La siguiente llamada a createQuotetendría el mismo resultado que el ejemplo anterior:
createQuote("eat your vegetables!", function(quote){ console.log(quote); });Por cierto, no tiene que usar la palabra "devolución de llamada" como el nombre de su argumento, Javascript solo necesita saber que es el nombre correcto del argumento. Según el ejemplo anterior, la función siguiente se comportará exactamente de la misma manera.
function createQuote(quote, functionToCall) { var myQuote = "Like I always say, " + quote; functionToCall(myQuote); }¿Por qué utilizar las funciones de devolución de llamada?
La mayoría de las veces estamos creando programas y aplicaciones que operan de manera síncrona . En otras palabras, algunas de nuestras operaciones se inician solo después de que se hayan completado las anteriores. A menudo, cuando solicitamos datos de otras fuentes, como una API externa, no siempre sabemos cuándo se devolverán nuestros datos. En estos casos, queremos esperar la respuesta, pero no siempre queremos que toda nuestra aplicación se detenga mientras se recuperan nuestros datos. Estas situaciones son donde las funciones de devolución de llamada son útiles.
Echemos un vistazo a un ejemplo que simula una solicitud a un servidor:
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!En el ejemplo anterior, hacemos una solicitud simulada a un servidor. Después de que transcurran 5 segundos, la respuesta se modifica y luego getResultsse ejecuta nuestra función de devolución de llamada . Para ver esto en acción, puede copiar / pegar el código anterior en la herramienta de desarrollo de su navegador y ejecutarlo.
Además, si ya está familiarizado setTimeout, entonces ha estado usando funciones de devolución de llamada todo el tiempo. ¡El argumento de función anónimo pasado a la setTimeoutllamada de función del ejemplo anterior también es una devolución de llamada! Entonces, la devolución de llamada original del ejemplo se ejecuta en realidad mediante otra devolución de llamada. ¡Tenga cuidado de no anidar demasiadas devoluciones de llamada si puede evitarlo, ya que esto puede llevar a algo llamado "infierno de devolución de llamada"! Como su nombre lo indica, no es un placer lidiar con él.