Paracetamol.js💊| #132: Explica este código JavaScript

¿Cuál es el orden de ejecución del siguiente código JavaScript?

Dificultad: Avanzado

async function asyncFunc() {
  console.log('asyncFunc() starts'); 
  return 'abc';
}

asyncFunc().
  then(x => { 
    console.log(`Resolved: ${x}`);
  });
console.log('Task ends'); 

A. asyncFunc() starts, Resolved: abc, Task ends
B. Task ends, asyncFunc() starts, Resolved: abc
C. asyncFunc() starts, Task ends, Resolved: abc
D. Ninguna de las anteriores

Respuesta en el primer comentario.

---

Comments

[Cristian Fernando]

Respuesta:
C. asyncFunc() starts, Task ends, Resolved: abc

• El interprete de JavaScript llega a la línea donde se llama a la función asyncFunc y muestra por consola asyncFunc() starts.
• Como asyncFunc es una función asíncrona, por definición regresará una promesa, por ello dicha promesa pasará a almacenarse temporalmente en el Micro Task Queue de JavaScript.
• Salimos de la función y ahora mostramos por consola Task ends.
• Posteriormente el Even Loop verifica que el Call Stack esta vacío y desde el Micro Task Queue pasamos la promesa para su ejecución.
• Finalmente mostramos por consola Resolved: abc y el programa termina.

Recuerda que el Micro Task Queue en JavaScript es exclusivo para manipular promesas a diferencia por ejemplo del Task Queue que administra Web API's.