Paracetamol.js💊| #19: ¿Qué imprime este código JavaScript?

#javascript #beginners #spanish #webdev

¿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)

Cristian Fernando • Jan 19 '22 • Edited

La respuesta es:

B: 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:

bar(); // primero llamamos a bar()
foo(); // luego a foo()
baz(); // finalmente baz()

Primero, llamamos a la función bar() que tiene en su cuerpo un setTimeout puedes pensar que al carecer de delay en ms este código se ejecuta de inmediato, pero no es así, ya que setTimeout es una Web 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 consola First.

Tercero, llamamos a la función baz(), que contiene código síncrono nuevamente, por ello pasa al Call Stack y mostramos por consola Third.

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 consola Second

Es complicado de entender al principio, te dejo una demostración gráfica