DEV Community

Cristian Fernando
Cristian Fernando

Posted on

Paracetamol.js馃拪| #19: 驴Qu茅 imprime este c贸digo JavaScript?

驴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();
Enter fullscreen mode Exit fullscreen mode
  • A: First Second Third
  • B: First Third Second
  • C: Second First Third
  • D: Second Third First

Respuesta en el primer comentario.


Discussion (2)

Collapse
duxtech profile image
Cristian Fernando Author • Edited on

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()
Enter fullscreen mode Exit fullscreen mode

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

Collapse
messimoraes profile image
Messi

Muito legal, consegui acertar sem ver a resposta. U.u