👉 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

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

// simulate server response latencysetTimeout(()=>console.log('Response'),5000);// this function is executed after the other one, but finished firstconsole.log('Request');// we can reduce latency to just 4ms and it'll still be executed after the 2nd functionsetTimeout(()=>console.log('Response'),4);// this function is executed after the other one, but finished firstconsole.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

// callerfunctionfoo(callback){callback('world');}// callback functionfunctionmyCallback(name){console.log(`Hello ${name}`);// "hello world"}// pass callback to callerfoo(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.