Skip to content

console-order.md

Latest commit

 

History

History
107 lines (67 loc) · 1.71 KB

console-order.md

File metadata and controls

107 lines (67 loc) · 1.71 KB
Raw

Console order – what runs first?

Use these in class: show the code, ask “In what order will we see the output in the console?”, then run it and compare.

Task 1

console.log("A");

setTimeout(function () {
  console.log("B");
}, 0);

console.log("C");
Answer

Order: A, C, B

Sync code runs first (A, then C). The callback for setTimeout(..., 0) goes to the task queue and runs after the current script and the event loop picks it up, so B appears last.

Task 2

console.log("1");

setTimeout(function () {
  console.log("2");
}, 1000);

setTimeout(function () {
  console.log("3");
}, 0);

console.log("4");
Answer

Order: 1, 4, 3, 2

Sync first: 1, 4. Then the event loop runs callbacks: the 0 ms timer fires first (3), then after ~1 s the second timer fires (2).

Task 3

console.log("start");

setTimeout(function () {
  console.log("timeout");
}, 0);

for (let i = 0; i < 3; i++) {
  console.log("loop " + i);
}

console.log("end");
Answer

Order: start, loop 0, loop 1, loop 2, end, timeout

All sync code (including the for loop) runs to completion first. The setTimeout callback runs only after the call stack is empty, so "timeout" appears last.

Task 4

console.log("X");

setTimeout(function () {
  setTimeout(function () {
    console.log("Z");
  }, 0);

  console.log("Y");
}, 100);

console.log("W");
Answer

Order: X, W, Y, Z

Sync: X, W. After ~100 ms the outer callback runs (Y), then it schedules the inner setTimeout; that callback (Z) runs on the next tick of the event loop.