console.log("foo"); setTimeout(() => { console.log("bar"); }, 0); queueMicrotask(() => { console.log("baz"); Promise.resolve() .then(() => console.log("ban")); }); new Promise((resolve) => { console.log("bla"); resolve("baf"); }).then(console.log); console.log("bak"); //// foo bla bak baz baf ban bar

Разбор вывода кода в JavaScript связан с порядком выполнения микротасков и макротасков в event loop.

Последовательность действий:

1. Выполняется весь синхронный код:

   • console.log("foo"); — выводит "foo"
   • Создается Promise, внутри которого console.log("bla"); — выводит "bla"
   • console.log("bak"); — выводит "bak"

2. Добавляются микротаски:

   • queueMicrotask(() => { console.log("baz"); Promise.resolve().then(() => console.log("ban")); });
   • .then(console.log) для созданного Promise с результатом "baf"

3. Выполняются микротаски в порядке добавления:

   • queueMicrotask выводит "baz"
   • Внутри микротаска Promise.then выводит "ban"
   • then для Promise выводит "baf"

4. Выполняются макротаски (setTimeout):

   • setTimeout(() => { console.log("bar"); }, 0); — выводит "bar"

Итоговый вывод:

foo
bla
bak
baz
baf
ban
bar

Обратите внимание, что микротаски выполняются сразу после текущего стека вызовов, а макротаски — после микротасков.