Interviewers love "what's the output order?" puzzles. There's one rule set that solves all of them.

The execution-order rule

1. Run ALL synchronous code (call stack) to completion.
2. Drain the ENTIRE microtask queue.
3. (Browser may render here.)
4. Run ONE macrotask.
5. Go to step 2.

So the order is: sync → all microtasks → one macrotask → all microtasks → one macrotask → ...

Puzzle 1

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);
// 1, 4, 3, 2

Sync: 1, 4. Microtasks: 3. Macrotask: 2.

Puzzle 2 — interleaving

console.log("A");
setTimeout(() => {
  console.log("B");
  Promise.resolve().then(() => console.log("C"));
}, 0);
setTimeout(() => console.log("D"), 0);
Promise.resolve().then(() => console.log("E"));
console.log("F");
// A, F, E, B, C, D

• Sync: A, F.
• Microtasks: E.
• Macrotask 1 (first timeout): B, queues microtask C. → drain microtasks → C.
• Macrotask 2 (second timeout): D.

Puzzle 3 — async/await

async function f() {
  console.log("1");
  await null;            // everything after await = a microtask
  console.log("2");
}
console.log("0");
f();
console.log("3");
// 0, 1, 3, 2

f() runs synchronously up to await; console.log("2") is scheduled as a microtask, so 3 (sync) prints first.

The mental checklist

1. Mark every line: sync, microtask (.then, await continuation, queueMicrotask), or macrotask (setTimeout, events).
2. Run all sync top-to-bottom.
3. Drain microtasks (watch for new ones added during the drain).
4. One macrotask → its sync runs, may queue micro/macro tasks.
5. Repeat from step 3.

Senior framing

Getting these right consistently — especially await (the continuation is a microtask) and microtasks queued inside a macrotask draining before the next macrotask — signals you actually understand the loop, not just memorized "Promises before setTimeout."