Advanced Async Patterns

Preview — 3 of 10 questions

What is the correct execution order of the following code, and why?

javascript

console.log('Start');

setTimeout(() => {
  console.log('Macrotask 1');
  setTimeout(() => {
    console.log('Macrotask 2');
    Promise.resolve().then(() => {
      console.log('Microtask in Macrotask 2');
    });
  }, 0);
  Promise.resolve().then(() => {
    console.log('Microtask in Macrotask 1');
  });
}, 0);

Promise.resolve().then(() => {
  console.log('Microtask 1');
  setTimeout(() => {
    console.log('Macrotask 3');
  }, 0);
});

console.log('End');

AStart → End → Microtask 1 → Macrotask 1 → Microtask in Macrotask 1 → Macrotask 3 → Macrotask 2 → Microtask in Macrotask 2

BStart → End → Microtask 1 → Macrotask 1 → Macrotask 2 → Microtask in Macrotask 1 → Microtask in Macrotask 2 → Macrotask 3

CStart → End → Macrotask 1 → Microtask 1 → Microtask in Macrotask 1 → Macrotask 2 → Microtask in Macrotask 2 → Macrotask 3

DStart → End → Macrotask 1 → Macrotask 2 → Microtask 1 → Microtask in Macrotask 1 → Microtask in Macrotask 2 → Macrotask 3

What will the following code output and why?

javascript

console.log('Before');

setTimeout(() => {
  console.log('Inside Timeout 1');
  Promise.resolve().then(() => console.log('Promise 1'));
  setTimeout(() => console.log('Inside Timeout 2'), 0);
}, 0);

Promise.resolve().then(() => {
  console.log('Inside Promise 1');
  setTimeout(() => console.log('Inside Timeout 3'), 0);
});

console.log('After');

ABefore → After → Inside Promise 1 → Inside Timeout 1 → Inside Timeout 3 → Promise 1 → Inside Timeout 2

BBefore → After → Inside Timeout 1 → Inside Promise 1 → Inside Timeout 3 → Promise 1 → Inside Timeout 2

CBefore → After → Inside Promise 1 → Inside Timeout 1 → Promise 1 → Inside Timeout 3 → Inside Timeout 2

DBefore → Inside Timeout 1 → After → Inside Promise 1 → Inside Timeout 3 → Inside Timeout 2 → Promise 1

What will the following code output?

javascript

console.log('A');

setTimeout(() => {
  console.log('B');
  Promise.resolve().then(() => console.log('C'));
}, 0);

Promise.resolve().then(() => {
  console.log('D');
  setTimeout(() => {
    console.log('E');
    Promise.resolve().then(() => console.log('F'));
  }, 0);
});

console.log('G');

AA → D → G → B → C → E → F

BA → G → D → B → C → E → F

CA → G → D → E → F → B → C

DA → G → D → B → E → F → C

Answer all 10 questions (7 more), see explanations for every answer, and track your score.