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

Explica este código JavaScript

Dificultad: Avanzado

function asyncFunc() {
  console.log('asyncFunc');
  return new Promise(
    (resolve, _reject) => {
      console.log('new Promise()');
      resolve();
    });
}
console.log('START');
asyncFunc()
  .then(() => {
    console.log('.then()'); // (A)
  });
console.log('END');

A. START, asyncFunc, .then(), new Promise(), END
B. asyncFunc, new Promise(), START, .then(), END
C. START, asyncFunc, new Promise(), END, .then()
D. START, asyncFunc, new Promise(), END, undefined

Respuesta en el primer comentario.

---

Comments

[Cristian Fernando]

Respuesta:
C. START, asyncFunc, new Promise(), END, .then()

• Empezamos ejecutando el código síncrono que nos encontramos antes de la llamar a la función asyncFunc, por ello el primer mensaje por consola es START.

• Al llamar a asyncFunc ejecutamos todo el código síncrono que se encuentre dentro de la función, por ello el segundo y tercer mensaje por consola es asyncFunc y new Promise() respectivamente.

• La función asyncFunc regresa una promesa per se, por Even Loop dicha promesa no entra directamente en el Call Stack de Javascript sino que se la aparta en el Micro Task Queue que se caracteriza por priorizar las promesas siempre.

• Salimos de la función y ejecutamos la última línea de código síncrono mostrando por consola END.

• El Call Stack ahora esta vacío, entonces la promesa que se encontraba en el Micro Task Queue pasa al Call Stack y finalmente mostramos por consola .then().