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();

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.

---

Comments

[Cristian Fernando]

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