👉 Ver todas las notas

Contenido

• Intro
• JS Asincrónico
• Qué es un callback?
• Cómo funcionan los callbacks en JavaScript?

Intro

• La mayor parte del código que escribimos se ejecuta secuencialmente. Llamamos a esto programación sincrónica
• A veces es beneficioso que el código se ejecute luego de que suceda algo determinado (un evento) y no secuencialmente. Llamamos a esto programación asincrónica

Los callbacks nos permiten programar de forma asincrónica

JS Asincrónico

• En un lenguaje single-thread, sólo una tarea puede ejecutarse a la vez
• Una tarea pasa a ejecutarse sólo si la anterior fue completada (ej: esperar a que una función termine de ejecutarse y retorne el resultado)
• Si una operación tarda mucho en finalizar, bloquea la ejecución del resto del programa (si tarda poco también, pero obviamente es más difícil de percibir)
• La ejecución asincrónica de código nos permite esquivar este cuello de botella, al delegar o poner en segundo plano^[1] una tarea, para que podamos continuar con la ejecución del resto, sin esperar a que la anterior finalice y obtener el resultado de la primera cuando finalice, para poder utilizarlo

const sync = () => {
  console.log('First');
  alert('Hello!');
  console.log('Third');
}

// simulate server response latency
setTimeout(() => console.log('Response'), 5000);

// this function is executed after the other one, but finished first
console.log('Request');

// we can reduce latency to just 4ms and it'll still be executed after the 2nd function
setTimeout(() => console.log('Response'), 4);

// this function is executed after the other one, but finished first
console.log('Request');

Ok todo muy lindo pero... qué es un callback? 🤔

Es una función. Se llama callback porque espera que alguien la llame para aparecer y ejecutarse. Se invoca sólo cuando pasa algo determinado. Es por esto último que decimos también que JavaScript es un lenguaje de programación orientado a eventos o event-driven.

Hay una inversión del control: en lugar de ser nosotras/os quienes decidimos cuándo va a ejecutarse una función (como lo hacemos normalmente, cuando codeamos secuencialmente), es otra función la que va a invocar a nuestro callback en algún momento.

¿Cómo funcionan los callbacks en JavaScript?

Recordemos que en JavaScript, las funciones son lo que llamamos First-Class citizens y esto nos permite tratarlas como cualquier otro valor, lo que incluye pasarlas por parámetro a otra función (y que esto a su vez es posible porque en JavaScript las funciones son higher order functions).

En el siguiente ejemplo, le pasamos una función (callback) myCallback por parámetro a otra función foo. La función callback luego es invocada por foo

// caller
function foo(callback) {
  callback('world');
}

// callback function
function myCallback(name) {
  console.log(`Hello ${name}`); // "hello world"
}

// pass callback to caller
foo(myCallback);

• Un callback es sólo una forma de guardar cosas para hacer más tarde
• El orden en el que las cosas suceden no es lineal ni de arriba hacia abajo: va cambiando a medida que otras tareas se completan

¹Ver notas sobre el Event Loop.