← JavaScript

Asincronía

¿Cuál es la diferencia entre código síncrono y asíncrono en JavaScript?

Ver respuesta — intenta responderla en voz alta primero

El código síncrono se ejecuta línea por línea, bloqueando hasta que cada línea termina. El código asíncrono te permite lanzar una tarea que toma tiempo (como una petición de red o un temporizador) y seguir ejecutando el resto del código sin esperar; el resultado se maneja después.

JavaScript es de un solo hilo: hace una cosa a la vez. Si todo fuera síncrono, una tarea lenta (como obtener datos de un servidor) congelaría la página entera hasta que terminara.

Para evitar eso, JavaScript usa código asíncrono: inicia la tarea lenta, la delega y sigue ejecutando todo lo demás. Cuando la tarea se completa, su resultado se maneja mediante un callback, una promesa o async/await.

  • Síncrono: "Me quedo aquí parado esperando hasta que termines."
  • Asíncrono: "Empieza la tarea y avísame cuando termines; mientras tanto, sigo con lo mío."
// SÍNCRONO: se ejecuta en orden, línea por línea
console.log("1");
console.log("2");
console.log("3");
// Salida: 1, 2, 3

// ASÍNCRONO: setTimeout no bloquea
console.log("A");
setTimeout(() => {
  console.log("B"); // se ejecuta después, incluso con un retraso de 0
}, 0);
console.log("C");
// Salida: A, C, B
// "B" aparece al final porque setTimeout es asíncrono:
// el código síncrono se ejecuta primero.

Suponer que setTimeout(fn, 0) ejecuta la función de inmediato. Incluso con un retraso de 0, la función se coloca en una cola y solo se ejecuta cuando el código síncrono actual ha terminado. Por eso "B" aparece después de "C".

"JavaScript es de un solo hilo, así que ejecuta una cosa a la vez. El código síncrono corre línea por línea y bloquea hasta que cada línea termina. El código asíncrono me permite lanzar una tarea que toma tiempo, como una petición al servidor, y seguir con el resto de mi código sin quedarme esperando; cuando la tarea termina, manejo el resultado con callbacks, promesas o async/await. Esto evita que la app se congele mientras espera operaciones lentas."

Reto rápido

¿En qué orden se imprimen las palabras?

console.log("inicio");
setTimeout(() => console.log("timeout"), 0);
console.log("fin");
Ver respuesta

inicio, fin, timeout. El código síncrono (inicio y fin) se ejecuta primero; el callback de setTimeout es asíncrono y se ejecuta al final, incluso con un retraso de 0.