馃憠 Ver todas las notas
- 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
- 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');
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.
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
1Ver notas sobre el Event Loop.