JavaScript: ¿Qué demonios es un Callback?

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:

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

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í:

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?

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:

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:

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.

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í:

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:

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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *