Aprende y comprende los fundamentos de un Callback en sólo 6 minutos con ejemplos sencillos.
¿Qué es un Callback?
De forma sencilla: Un Callback (llamada de vuelta) es una función que se ejecutará después de que otra función haya terminado de ejecutarse, de aquí el nombre de Callback.
De forma más compleja: En JavaScript, las funciones son objetos. Por ello, las función admiten funciones como argumentos y pueden ser devueltas por otras funciones. Las funciones que hacen esto se denominan funciones de orden alto (high-order). Cualquier función que se pase como argumento se denomina función Callback.
Pero esto sólo es mucha palabrería… Veamos algunos ejemplos para detallar estas definiciones.
¿Por qué necesitamos Callbacks?
Por una razón muy importante, JavaScript es un lenguaje orientado a eventos. Esto significa que en lugar de esperar a una respuesta para avanzar, JavaScript seguirá ejecutándose mientras escucha otros eventos. Echemos un vistazo a un ejemplo básico:
1 2 3 4 5 6 7 8 |
function first(){ console.log(1); } function second(){ console.log(2); } first(); second(); |
Como podrías esperar, la función first se ejecuta la primera y la función second se ejecuta después, escribiendo el siguiente mensaje en la consola.
1 2 |
// 1 // 2 |
Por ahora todo claro.
Pero, ¿qué pasaría si la función first contuviera algún tipo de código que no se puede ejecutar inmediatamente? Por ejemplo, una petición a una API, donde tenemos que enviar una petición y esperar una respuesta. Para simular esta acción, usaremos setTimeout que es una función JavaScript que llama a una función después de una determinada cantidad de tiempo. Vamos a retrasar nuestra función 500 milisegundos para simular una petición a una API. Nuestro nuevo código quedaría así:
1 2 3 4 5 6 7 8 9 10 11 |
function first(){ // Simular retardo setTimeout( function(){ console.log(1); }, 500 ); } function second(){ console.log(2); } first(); second(); |
No es importante entender ahora como funciona setTimeout. Lo realmente importante es ver que hemos movido console.log(1); dentro del retraso de 500 milisegundos. Así que, ¿qué pasa ahora cuando invocamos nuestras funciones?
1 2 3 4 |
first(); second(); // 2 // 1 |
A pesar de que hemos invocado primero a la función first, se ha escrito el resultado de esa función después de la función second.
No es que JavaScript no haya ejecutado las funciones en el orden que queríamos, lo que sucede es que JavaScript no ha esperado a la respuesta de first para avanzar y ejecutar second.
¿Por qué te mostramos esto? Porque no podemos sencillamente llamar a una función detrás de otra esperar que se ejecuten en el orden correcto. Los Callbacks son un modo de asegurarse de que cierto código no se ejecuta hasta que otro código haya terminado de ejecutarse.
Crea un Callback
De acuerdo, basta de hablar, ¡vamos a crear un Callback!
Primero, abre tu Consola de Desarrollador de Chrome (Windows: Ctrl + Mays+ J) (Mac: Cmd + Option + J) y teclea la siguiente declaración de función en la consola:
1 2 3 |
function doHomework(subject) { alert(`Starting my ${subject} homework.`); } |
Arriba hemos creado la función doHomework. Nuestra función recibe una variable, la asignatura en la que estamos trabajando. Llama a esta función tecleando lo siguiente en la consola:
1 2 |
doHomework('math'); // Alerts: Starting my math homework. |
Ahora añadamos el Callback. Como último parámetro de nuestra función doHomework podemos pasar callback. La función de callback se define en el segundo argumento de nuestra llamada a doHomework.
1 2 3 4 5 6 7 8 |
function doHomework(subject, callback) { alert(`Starting my ${subject} homework.`); callback(); } doHomework('math', function() { alert('Finished my homework'); }); |
Como verás, si tecleas el código anterior en tu consola obtendrás dos alertas: una »Starting homework’ y a continuación la alerta ‘finished homework’.
Pero las funciones callback no tienen porqué estar definidas siempre en nuestra llamada a la función. Se puede definir en cualquier parte del código así:
1 2 3 4 5 6 7 8 |
function doHomework(subject, callback) { alert(`Starting my ${subject} homework.`); callback(); } function alertFinished(){ alert('Finished my homework'); } doHomework('math', alertFinished); |
El resultado de este ejemplo es exactamente el mismo que el anterior, pero el código es algo diferente. Como puedes ver, hemos pasado la definición de función alertFinished como un argumento durante nuestra llamada a la función doHomework.
Un ejemplo real
La semana pasada publiqué un artículo acerca de cómo crear un bot para Twitter con 38 líneas de código (en inglés). El único motivo por el que el código de ese artículo funciona es la API de Twitter. Cuando lanzas peticiones a una API, tienes que esperar a la respuesta antes de que puedas hacer algo con ella. Este es un ejemplo perfecto de un callback en el mundo real. Aquí tienes como sería la petición:
1 2 3 4 5 6 7 |
T.get('search/tweets', params, function(err, data, response) { if(!err){ // Aquí sucede la magia } else { console.log(err); } }) |
- T.get tan sólo significa que lanzamos una petición a Twitter.
- Hay tres parámetros en esta petición: ‘search/tweets’, que es la ruta de nuestra petición, params, que son los parámetros de búsqueda y finalmente una función anónima que es nuestro callback.
El callback es importante aquí porque tenemos que esperar a la respuesta del servidor antes de avanzar en el código. No sabemos si nuestra petición al API tendrá éxito o no, así que después de enviar nuestros parámetros a search/tweets a través de una petición GET, tenemos que esperar. Una vez que Twitter responde, se llama a la función de callback. Twitter entonces enviará un objeto err (error) o un objeto response de vuelta. En nuestra función de callback podemos usar una sentencia if para determinar si nuestra petición ha tenido éxito o no y actuar de acuerdo con los datos obtenidos.
Lo conseguiste
¡Buen trabajo! Ahora ya puedes (espero) comprender que es un callback y como funciona. Esto no es nada más que la punta del iceberg de los callbacks, ¡aún hay mucho más que aprender! Publico varios artículos/tutoriales cada semana, por favor, deja tu correo aquí si te gustaría recibir una notificación semanal.
Puedes ver el artículo original en inglés aquí: https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced
Maestro!!!! no sabes del rollo del que me sacas, me estaba reventando el cerebro tratando de saber como tratar mis respuestas de las API, un abrazo y muchísimas gracias
Tu ejemplo de dohomework lo veo un poco malo.
Explicar callbacks con llamadas desde el stack, es decir, no asyncronas, es como explicar a hacer pan sin harina o hacerte un porro solo con papel de liar y tabaco, y imaginarte que lleva hierva. ¿se entiende mejor?
Todo esto se puede hacer pasando una función dentro de otra sin necesidad añadir callback como argumento. Para qué entonces se necesita callback? No me ha quedado claro. Lo que me ocurre son diferentes funciones de callback que se declaran depende de condiciones al ejecutar la función de alta nivel.
La diferencia con lo que dices es que los callbacks no se ejecutan hasta que no se obtenga una respuesta de la función ‘padre’.
//Sin el uso de callbacks la función two es independiente de lo que pueda pasar con la función one, pero si la función two necesitara esperar unos datos que devuelve la función one, aquí estaría el problema, porque sin importar lo que pueda tardar la función one, two se ejecutaría lanzando error. Con los callbacks se espera a que one se ejecute para poder después ejecutar la función two.
function one (){ … }
function two (){ … }
one();
two();
Muy bien explicado, muchas gracias
Me podrias ayudar realizando este ejercicio?
Vamos a crear tres funciones y ver cómo empezar a trabajar con callbacks.
La primera función se llamará doble. Esta recibirá un número y retornará el doble.
La segunda función se llamará triple. Esta recibirá un número y retornará el triple.
La tercera función se llamará aplicarCallback y recibirá por parámetro un numero y una función. Esta retornará el valor de aplicar dicha función al valor que recibió.
Hola Paty, buenas noches, leyendo tu comentario aplique lo siguiente para poder realizar tu ejercicio, creo que pudo haberse realizado de mejor manera, pero aquí esta un ejemplo, espero te pueda servir para lo que requieres.
Lo explicare de manera resumida, se crean tres funciones (en este caso son expresiones de función), las dos primeras al recibir como argumento un número lo duplican o triplican, la tercera función recibe un número, el cual determina la función a ejecutar, ya sea la función llamada «doble» o «triple», dependiendo del número que se le ingrese a la función nombrada «aplicarCallback» es la función que se invoca (llamada a la función), el segundo argumento de la función «aplicarCallback» es una función anonima (una función que no tienen un nombre) en la cual se crea toda la funcionalidad de tu programa, para determinar que función llamar se ocuparón una serie de if, que dependiendo del número que ingreses muestra el resultado de alguna de tus primeras dos funciones («función doble» o «función triple»).
Si tienes más dudas, puedes enviarme mensaje a través de mi correo particular => edgarcoronamx@gmail.com
let ingresaNumero=Number(prompt(‘Ingresa un número’));
var doble=function(ingresaNumero){
let respuesta=(ingresaNumero*2);
alert(‘El resultado de la función «doble» es => ‘+respuesta);
}
var triple=function(ingresaNumero){
let respuesta=(ingresaNumero*3);
alert(‘El resultado de la función «triple» es => ‘+respuesta)
}
var aplicarCallback=function(ingresaNumero,f){
let respuesta=(f());
return(respuesta);
}
aplicarCallback(ingresaNumero,function(){
if(ingresaNumero===1){
doble(ingresaNumero);
}else{
if(ingresaNumero===2){
triple(ingresaNumero);
}else{
if(ingresaNumero>2){
alert(‘¡INGRESA OTRO NÚMERO!’);
}
}
}
});
Hola Paty, buenas noches, leyendo tu comentario aplique lo siguiente para poder realizar tu ejercicio, creo que pudo haberse realizado de mejor manera, pero aquí esta un ejemplo, espero te pueda servir para lo que requieres.
Lo explicare de manera resumida, se crean tres funciones (en este caso son expresiones de función), las dos primeras al recibir como argumento un número lo duplican o triplican, la tercera función recibe un número, el cual determina la función a ejecutar, ya sea la función llamada «doble» o «triple», dependiendo del número que se le ingrese a la función nombrada «aplicarCallback» es la función que se invoca (llamada a la función), el segundo argumento de la función «aplicarCallback» es una función anonima (una función que no tienen un nombre) en la cual se crea toda la funcionalidad de tu programa, para determinar que función llamar se ocuparón una serie de if, que dependiendo del número que ingreses muestra el resultado de alguna de tus primeras dos funciones («función doble» o «función triple»).
Si tienes más dudas, puedes enviarme mensaje a través de mi correo particular => edgarcoronamx@gmail.com
let ingresaNumero=Number(prompt(‘Ingresa un número’));
var doble=function(ingresaNumero){
let respuesta=(ingresaNumero*2);
alert(‘El resultado de la función «doble» es => ‘+respuesta);
}
var triple=function(ingresaNumero){
let respuesta=(ingresaNumero*3);
alert(‘El resultado de la función «triple» es => ‘+respuesta)
}
var aplicarCallback=function(ingresaNumero,f){
let respuesta=(f());
return(respuesta);
}
aplicarCallback(ingresaNumero,function(){
if(ingresaNumero===1){
doble(ingresaNumero);
}else{
if(ingresaNumero===2){
triple(ingresaNumero);
}else{
if(ingresaNumero>2){
alert(‘¡INGRESA OTRO NÚMERO!’);
}
}
}
});