DEV Community

Cristian Fernando
Cristian Fernando

Posted on

Paracetamol.js馃拪| #119: Explica este c贸digo JavaScript

驴Cu谩l es el orden de ejecuci贸n de este c贸digo JavaScript?

Dificultad: Avanzado

const tom = () => console.log('Tom');

const jerry = () => console.log('Jerry');

const cartoon = () => {
  console.log('Cartoon');

  setTimeout(tom, 5000);

  new Promise((resolve, reject) =>
    resolve('should it be right after Tom, before Jerry?')
  ).then(resolve => console.log(resolve))

  jerry();
}

cartoon();
Enter fullscreen mode Exit fullscreen mode

A. Cartoon, Jerry, should it be right after Tom, before Jerry?, Tom
B. Tom, Jerry, Cartoon, should it be right after Tom, before Jerry?
C. Cartoon, Jerry, Tom, should it be right after Tom, before Jerry?
D. Ninguna de las anteriores.

Respuesta en el primer comentario.


Discussion (1)

Collapse
duxtech profile image
Cristian Fernando Author

Respuesta:
A. Cartoon, Jerry, should it be right after Tom, before Jerry?, Tom

Para responder f谩cilmente esta pregunta se debe tener un dominio del Even Loop de JavaScript.

El interprete del lenguaje recorre todo el c贸digo hasta llegar a la primera y 煤nica invocaci贸n de funci贸n en la 煤ltima l铆nea de c贸digo del ejemplo.

Entramos a la funci贸n cartoon:

  • Imprimimos Cartoon por que solo es un log s铆ncrono.
  • La funci贸n setTimeout es una Web API por ende no entra al Call Stack sino que se debe esperar 5000 ms para que ingrese en el Task Queue.
  • Ahora tenemos una promesa, esta por el simple hecho de ser promesa no pasa al Task Queue, sino que tiene reservado una ubicaci贸n especial exclusivamente para promesas denominada Micro Task Queue o tambi茅n llamada Job Queue.
  • Finalmente tenemos otro log s铆ncrono, imprimimos Jerry

Ahora, regresemos al setTimeout y a la promesa.

驴C贸mo hace JavaScript para determinar que imprimir primero?

En este punto el Even Loop ya verifico que el Call Stack esta vac铆o.

Entonces, en este caso en particular las promesas almacenadas en el Micro Task Queue tienen prioridad sobre cualquier Web API, por ello, es la promesa la que pasa primero al Call Stack y mostramos por consola should it be right after Tom, before Jerry

Solo nos queda el setTimeout, y ahora mostramos Tom pasados los 5000 ms