Higher-Order Functions y el patrón Callback

Contenido del curso

Event Loop and Execution Model

Callbacks

Promesas

Async/Await Javascript Moderno

Casos reales de uso de asincronismo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:005:59

Higher-Order Functions y el patrón Callback

Curso de Asincronismo con Javascript

Clase 3 de 18

Clase 3 / 18

Recursos

Comprender cómo funcionan los callbacks es fundamental para dominar la asincronía en JavaScript. Este patrón fue durante años la forma principal de manejar operaciones que no se ejecutan de inmediato, y aunque hoy existen alternativas como las promesas y async/await, los callbacks siguen presentes en el día a día de cualquier desarrollador.

¿Qué es un callback y por qué es tan importante?

Un callback es simplemente una función que se pasa como argumento a otra función, para que esa otra función la ejecute en el momento adecuado [0:14]. No es un concepto exclusivo de la asincronía; de hecho, lo usas constantemente sin darte cuenta.

Cuando una función recibe otra función como argumento o devuelve una función, se le conoce como higher-order function [0:28]. Métodos como forEach, map, filter y reduce son ejemplos perfectos de higher-order functions porque reciben un callback como parámetro.

¿Cómo se ve un callback en código real?

Veamos un ejemplo básico con forEach [0:42]:

javascript const numeros = [1, 2, 3];

numeros.forEach(function(numero) { console.log(numero); });

La función anónima que recibe forEach es el callback, y forEach es la higher-order function. Lo mismo se puede escribir con una arrow function:

javascript numeros.forEach(numero => console.log(numero));

Otros ejemplos comunes incluyen map y filter [1:17]:

javascript const dobles = numeros.map(n => n * 2); console.log(dobles);

const pares = numeros.filter(n => n % 2 === 0); console.log(pares);

En cada caso, la función que pasas como argumento es un callback que la higher-order function ejecuta internamente.

¿Cuál es la diferencia entre callbacks síncronos y asíncronos?

No todos los callbacks son asíncronos. Un callback síncrono se ejecuta de forma inmediata, uno por uno, bloqueando el hilo hasta que termina [1:42]. La diferencia clave está en quién llama al callback y cuándo.

Observa este ejemplo [1:55]:

javascript console.log('antes'); numeros.forEach(n => console.log(n)); console.log('después');

El resultado es predecible: primero "antes", luego los números en orden, y finalmente "después". Todo se ejecuta secuencialmente porque forEach es síncrono.

En cambio, un callback asíncrono no respeta ese orden lineal. Su ejecución depende del event loop, del call stack y de si la tarea es una macro task o una micro task [2:24]. Un setTimeout, por ejemplo, enviará su callback a la cola de macro tasks, y se ejecutará solo cuando el call stack esté vacío.

¿Cómo funcionan los callbacks asíncronos en la práctica?

Los callbacks asíncronos son la base de cómo JavaScript manejó la asincronía durante años [2:42]. La idea es directa: en lugar de esperar un resultado, le indicas a JavaScript qué función ejecutar cuando algo suceda.

javascript setTimeout(() => { console.log('Han pasado 2 segundos'); }, 2000);

document.getElementById('boton').addEventListener('click', () => { console.log('Clic detectado'); });

En ambos casos, tú defines la función y el entorno decide cuándo llamarla [3:08]: cuando pasen dos segundos, cuando el usuario haga clic, cuando se complete una petición HTTP.

¿Por qué los callbacks siguen siendo relevantes hoy?

Antes de las promesas, prácticamente toda la asincronía se resolvía con callbacks: lectura de archivos, peticiones HTTP, acceso a bases de datos y eventos del DOM [3:22]. El patrón siempre seguía tres pasos:

Llamas a una función.
Le pasas un callback.
Cuando termina la operación, se ejecuta el callback.

Los callbacks ofrecen una separación clara entre iniciar una tarea y reaccionar al resultado [3:40]. Siguen siendo útiles en casos simples y continúan presentes en muchas APIs.

Sin embargo, surge una pregunta natural: ¿qué pasa cuando necesitas encadenar varias operaciones asíncronas en secuencia? ¿Y qué ocurre cuando algo falla? Estas limitaciones son exactamente lo que las promesas y async/await resuelven. Si ya dominas los callbacks, estás listo para dar ese siguiente paso. ¿Qué patrón asíncrono prefieres usar en tus proyectos?

Resumen

¿Qué es un callback y por qué es tan importante?

¿Cómo se ve un callback en código real?

Veamos un ejemplo básico con forEach [0:42]:

javascript const numeros = [1, 2, 3];

numeros.forEach(function(numero) { console.log(numero); });

La función anónima que recibe forEach es el callback, y forEach es la higher-order function. Lo mismo se puede escribir con una arrow function:

javascript numeros.forEach(numero => console.log(numero));

Otros ejemplos comunes incluyen map y filter [1:17]:

javascript const dobles = numeros.map(n => n * 2); console.log(dobles);

const pares = numeros.filter(n => n % 2 === 0); console.log(pares);

En cada caso, la función que pasas como argumento es un callback que la higher-order function ejecuta internamente.

¿Cuál es la diferencia entre callbacks síncronos y asíncronos?

Observa este ejemplo [1:55]:

javascript console.log('antes'); numeros.forEach(n => console.log(n)); console.log('después');

El resultado es predecible: primero "antes", luego los números en orden, y finalmente "después". Todo se ejecuta secuencialmente porque forEach es síncrono.

¿Cómo funcionan los callbacks asíncronos en la práctica?

javascript setTimeout(() => { console.log('Han pasado 2 segundos'); }, 2000);

document.getElementById('boton').addEventListener('click', () => { console.log('Clic detectado'); });

En ambos casos, tú defines la función y el entorno decide cuándo llamarla [3:08]: cuando pasen dos segundos, cuando el usuario haga clic, cuando se complete una petición HTTP.

¿Por qué los callbacks siguen siendo relevantes hoy?

Llamas a una función.
Le pasas un callback.
Cuando termina la operación, se ejecuta el callback.

Los callbacks ofrecen una separación clara entre iniciar una tarea y reaccionar al resultado [3:40]. Siguen siendo útiles en casos simples y continúan presentes en muchas APIs.

Event Loop and Execution Model

Quien domina el Asincronismo domina JS

Microtasks vs Macrotasks

Callbacks

Higher-Order Functions y el patrón Callback

Convenciones Error-First y Node.js

Callback Hell: La Pirámide del Destino

Promesas

El ciclo de vida de una Promesa

Consumiendo y encadenando Promesas

Manejo de errores y rechazos

Combinadores de Promesas

Async/Await Javascript Moderno

La función async y la palabra clave await

Manejo de errores con try/catch en funciones async

Patrones de ejecución: secuencial vs paralelo

Refactorizando Promise chains a async/await

Casos reales de uso de asincronismo

Presentacion Proyecto

Fetch API: cómo validar respuestas con response.ok

Archivos del proyecto

Integrar LLMs con Async y Abort Controller

integracion con LLMs

Higher-Order Functions y el patrón Callback

Progreso del curso

Event Loop and Execution Model

Callbacks

Promesas

Async/Await Javascript Moderno

Casos reales de uso de asincronismo

Recursos

Recursos