¿Qué imprime este código JavaScript?
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"));
const baz = () => console.log("Third");
bar();
foo();
baz();
- A:
First
Second
Third
- B:
First
Third
Second
- C:
Second
First
Third
- D:
Second
Third
First
Respuesta en el primer comentario.
Top comments (2)
La respuesta es:
First
Third
Second
Para comprender la respuesta es necesario entender temas estructurales del lenjuage, es decir, ir a las bases de JavaScript y conocer conceptos como Event Loop, Call Stack, Task Queue, Web Api's entre otros.
Para poder darse cuenta, el secreto que puedo compartirte es concentrarse en el orden de las llamadas a las funciones, es decir en estas líneas:
Primero, llamamos a la función
bar()
que tiene en su cuerpo unsetTimeout
puedes pensar que al carecer de delay en ms este código se ejecuta de inmediato, pero no es así, ya quesetTimeout
es unaWeb Api
, por este motivo este código debe almacenarse en lo que llamamos Task Queue.Segundo, llamamos a la función
foo()
, que contiene código síncrono, por ende pasa directamente al Call Stack y mostramos por consolaFirst
.Tercero, llamamos a la función
baz()
, que contiene código síncrono nuevamente, por ello pasa al Call Stack y mostramos por consolaThird
.Ahora, el algotirmo del Even Loop se da cuenta que no hay mas funciones por llamar, y verifica que el Call Stack esta vacio, entonces busca si hay algo en el Task Queue, y oh sorpresa, esta nuestro
setTimeout
, entonces lo pasa al Call Stack para finalmente mostrar por consolaSecond
Es complicado de entender al principio, te dejo una demostración gráfica
Muito legal, consegui acertar sem ver a resposta. U.u