Hablemos de Callbacks

¿Qué son Callbacks?

Un callback es una función que será ejecutada después de que otra función haya terminado de ejecutarse. Simple, no?… Bueno, no tanto.

En Javascript, las funciones son objetos. Por esta razón, estas pueden tomar otras funciones como argumentos y pueden ser retornadas así mismo por otras funciones. Este tipo de funciones son llamadas Higher Order Funcitions o funciones de alto nivel. Cualquier función que es pasada como argumento es llamada callback.

Pero, ¿por qué son importantes los callbacks?

Javascript es un lenguaje impulsado por eventos o “event driven language”. Esto quiere decir que en lugar de esperar una respuesta antes de continuar, Javascript seguirá ejecutándose mientras escucha otros eventos. Miremos este ejemplo básico:

function arepaCo(){
  console.log('La arepa es Colombiana');
}
function arepaVe(){
  console.log('La arepa es Venezolana');
}
arepaCo();
arepaVe();

Como podemos esperar, la función arepaCo() se ejecutará primero y a continuación será ejecutada la función arepaVe(), mostrando como resultado en la consola:

// La arepa es Colombiana
// La arepa es Venezolana

Todo bien hasta ahora.

Pero ¿qué sucede si por ejemplo la función arepaCo() contiene cierto código que no puede ser ejecutado de forma inmediata? Por ejemplo una llamada a una API a la que tenemos que enviar una solicitud y esperar por una respuesta. Para simular este comportamiento podemos utilizar setTimeOut() que es una función de Javascript que llama otra función después de determinado tiempo. Vamos a retrasar nuestra función por 500 mili segundos para simular un API request. Nuestro código debería verse así:

function arepaCo(){
  // Simulate a code delay
  setTimeout( function(){
    console.log('La arepa es Colombiana');
  }, 500 );
}
function arepaVe(){
  console.log('La arepa es Venezolana');
}
arepaCo();
arepaVe();

No entraremos en detalles sobre cómo funciona setTimeOut en este momento. Démosle atención al callback dentro de setTimeout, console.log(’La arepa es Colombiana’); que ha sido movido dentro del delay de 500 mili segundos. Entonces ¿qué sucederá cuando llamemos nuestras funciones?

// La arepa es Venezolana
// La arepa es Colombiana

Aunque hayamos llamado primero la función arepaCo() la que se mostrará primero en la consola será arepaVe() . Esto no quiere decir que Javascript no haya ejecutado en el orden que le pedimos las cosas. Lo que sucede es que Javascript no esperó por una respuesta de arepaCo() antes de pasar a la ejecución de arepaVe() .

Y ¿para qué les muestro esto? Pues, porque no puedes llamar una función después de otra y esperar que se ejecuten en ese orden. Los callbacks son una forma de asegurar que cierto código no se ejecutará hasta que otro bloque de código haya sido ejecutado.

Nuestro Callback

Veamos el siguiente ejemplo:

const dayMeal = (meal) =>{
  console.log('Today we have ' + meal + ' for lunch')
}

Acabamos de crear la función dayMeal() . Nuestra función toma un parámetro, la comida del día meal . Para ejecutar este código simplemente llamamos nuestra función y pasamos la comida del día como parámetro.

dayMeal('lasagna')
//Today we have Lasagna for lunch

Ahora agreguemos nuestro callback. Como parámetro también podemos pasar funciones, en este caso nuestro callback lo definiremos como segundo parámetro en nuestra función dayMeal() .

const dayMeal = (meal, callback) =>{
  console.log('Today we have ' + meal + ' for lunch')
  callback()
}
dayMeal('Lasagna', () =>{
  console.log('I love that meal')
})

Nuestro código entonces arrojará el siguiente resultado en la consola

// Today we have Lasagna for lunch
// I love that meal

No es necesario definir nuestro callback directamente en nuestra función, podemos hacerlo en cualquier otro lado de nuestro código.

const dayMeal = (meal, callback) =>{
  console.log('Today we have ' + meal + ' for lunch')
  callback()
}
let love = () =>{
  console.log('I love that meal')
}
dayMeal('Lasagna', love)

Obtendremos el mismo resultado que antes pero nuestro código se verá mucho mas ordenado y funcional, lo que nos permitirá manejarlo de mejor forma en caso de tener algún bug.

En la vida real

Dudo mucho que nos enfrentemos a código como el anterior. Pero en nuestro día a día nos encontraremos con código que hará solicitudes a servidores y recibirá respuestas quizás no en el momento que esperamos. No sabemos cuánto puede tardar una respuesta a un request, por esto es importante entender cómo funcionan los callbacks.

Actualmente utilizamos promises, async/await u observables (son lo mejor ❤️) para manejar este tipo de problemas. Esos temas los tocaremos en otros blogs 😊