¿Cuál será la salida en consola de este código?
importancia: 5
console.log(1);
setTimeout(() => console.log(2));
Promise.resolve().then(() => console.log(3));
Promise.resolve().then(() => setTimeout(() => console.log(4)));
Promise.resolve().then(() => console.log(5));
setTimeout(() => console.log(6));
console.log(7);
La salida en la consola es: 1 7 3 5 2 6 4.
La tarea es bastante simple, solamente necesitamos saber cómo funcionan las colas de micro y macrotareas.
Veámoslo paso a paso.
console.log(1);
// La primera línea se ejecuta inmediatamente, e imprime`1`.
// Por ahora, las colas de micro y macrotareas están vacías.
setTimeout(() => console.log(2));
// `setTimeout` agrega la callback a la cola de macrotareas.
// - contenido de la cola de macrotareas:
// `console.log(2)`
Promise.resolve().then(() => console.log(3));
// La callback es agregada a la cola de microtareas.
// - contenido de la cola de microtareas:
// `console.log(3)`
Promise.resolve().then(() => setTimeout(() => console.log(4)));
// La callback con `setTimeout(...4)` es agregada a las microtareas.
// - contenido de la cola de microtareas:
// `console.log(3); setTimeout(...4)`
Promise.resolve().then(() => console.log(5));
// La callback es agregada a la cola de microtareas
// - contenido de la cola de microtareas:
// `console.log(3); setTimeout(...4); console.log(5)`
setTimeout(() => console.log(6));
// `setTimeout` agrega la callback a las macrotareas
// - contenido de la cola de macrotareas:
// `console.log(2); console.log(6)`
console.log(7);
// Imprime 7 inmediatamente.
Concluyendo:
- Los números
1
y7
se muestran inmediatamente, porque simples llamados aconsole.log
no usan ninguna cola. - Solo entonces, después de que el flujo del código principal finaliza, se ejecuta la cola de microtareas.
- esta tiene los comandos:
console.log(3); setTimeout(...4); console.log(5)
. - se muestran los números
3
y5
, mientras quesetTimeout(() => console.log(4))
agrega el llamado aconsole.log(4)
al final de la cola de macrotareas. - La cola de macrotareas ahora es:
console.log(2); console.log(6); console.log(4)
.
- esta tiene los comandos:
- Una vez que la cola de microtareas se vacía, se ejecuta la de macrotareas. Esta imprime
2
,6
,4
.
Finalmente, tenemos que la salida es: 1 7 3 5 2 6 4
.