3/8/2019 JavaScript: ¿Qué demonios es un Callback?

– Developing in Spanish

DEVELOPING IN SPANISH

JavaScript: ¿Qué demonios es un Callback?

javfon1    18 marzo, 2019    No hay comentarios

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

developinginspanish.com/2019/03/18/javascript-que-demonios-es-un-callback/ 1/6
3/8/2019 JavaScript: ¿Qué demonios es un Callback? – Developing in Spanish

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 de niciones.

¿Por qué necesitamos Callbacks?

Por una razón muy importante, JavaScript es un lenguaje orientado a eventos. Esto signi ca 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:

function first(){
console.log(1);
}
function second(){
console.log(2);
}
first();
second();

Como podrías esperar, la función rst se ejecuta la primera y la función second se ejecuta después,
escribiendo el siguiente mensaje en la consola.

// 1
// 2

Por ahora todo claro.

Pero, ¿qué pasaría si la función rst 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í:

function first(){
// Simular retardo
setTimeout( function(){

developinginspanish.com/2019/03/18/javascript-que-demonios-es-un-callback/ 2/6
3/8/2019 JavaScript: ¿Qué demonios es un Callback? – Developing in Spanish

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?

first();
second();
// 2
// 1

A pesar de que hemos invocado primero a la función rst, 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 rst 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:

function doHomework(subject) {
alert(`Starting my ${subject} homework.`);

developinginspanish.com/2019/03/18/javascript-que-demonios-es-un-callback/ 3/6
3/8/2019 JavaScript: ¿Qué demonios es un Callback? – Developing in Spanish

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:

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 de ne en el segundo argumento de nuestra llamada a doHomework.

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 ‘ nished homework’.

Pero las funciones callback no tienen porqué estar de nidas siempre en nuestra llamada a la función. Se
puede de nir en cualquier parte del código así:

function doHomework(subject, callback) {

alert(`Starting my ${subject} homework.`);
callback();
}
function alertFinished(){
alert('Finished my homework');
}
doHomework('math', alertFinished);

developinginspanish.com/2019/03/18/javascript-que-demonios-es-un-callback/ 4/6
3/8/2019 JavaScript: ¿Qué demonios es un Callback? – Developing in Spanish

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 de nició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:

T.get('search/tweets', params, function(err, data, response) {

if(!err){
// Aquí sucede la magia
} else {
console.log(err);
}
})

T.get tan sólo signi ca 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 nalmente 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 noti cación semanal.

Puedes ver el artículo original en inglés aquí: https://codeburst.io/javascript-what-the-heck-is-a-callback-

aba4da2deced

developinginspanish.com/2019/03/18/javascript-que-demonios-es-un-callback/ 5/6