0Pricing
JavaScript Academy · Lesson

Event Loop & Task vs Microtask Basics

See how the event loop runs sync code first, then microtasks, then tasks. Practice with setTimeout, Promise.then, and queueMicrotask.

Event Loop & Task vs Microtask Basics is a free JavaScript Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Intro to event loop

Goal: Learn the basic order: sync code → microtasks (Promise/queueMicrotask) → tasks (setTimeout).

  • Sync first
  • Microtasks next
  • Tasks last
Event Loop & Task vs Microtask Basics — illustration 1

Sync first

Synchronous statements execute top-to-bottom before any queued callbacks.

// Sync code runs immediately
console.log("A: sync start");

console.log("B: sync middle");

console.log("C: sync end");
Event Loop & Task vs Microtask Basics — illustration 2

Task queue basics

setTimeout places a task in the queue. It runs after the current tick completes.

// Tasks (macrotasks) via setTimeout
console.log("1: start");

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

console.log("2: after scheduling");
Event Loop & Task vs Microtask Basics — illustration 3

Microtask basics

Promise.then adds a microtask. Microtasks run right after sync code and before tasks.

// Microtasks via Promise.then
console.log("X: sync");

Promise.resolve().then(function () {
  console.log("Y: microtask");
});

console.log("Z: after scheduling microtask");
Event Loop & Task vs Microtask Basics — illustration 4

Order demo

Expected order: Start → End → Microtask → Task.

// Order demo: microtask runs before task
console.log("Start");

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

Promise.resolve().then(function () {
  console.log("Microtask: promise");
});

console.log("End");
Event Loop & Task vs Microtask Basics — illustration 5

queueMicrotask demo

queueMicrotask also schedules a microtask. Keep callbacks small for smooth apps.

// queueMicrotask is another way to schedule a microtask
console.log("S");

queueMicrotask(function () {
  console.log("M: microtask");
});

console.log("E");

// Tip: do not overuse microtasks; keep callbacks tiny
Event Loop & Task vs Microtask Basics — illustration 6

Microtask vs task quiz

Quick check: Ordering rule.

Event Loop & Task vs Microtask Basics — illustration 7

Recap

Recap: The loop runs sync code first, then empties the microtask queue, then runs tasks. Use setTimeout for tasks and Promise.then/queueMicrotask for microtasks.

Event Loop & Task vs Microtask Basics — illustration 8

Frequently asked questions

Is the “Event Loop & Task vs Microtask Basics” lesson free?

Yes — the full text of “Event Loop & Task vs Microtask Basics” is free to read here on the web, and the JavaScript Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Event Loop & Task vs Microtask Basics”?

See how the event loop runs sync code first, then microtasks, then tasks. Practice with setTimeout, Promise.then, and queueMicrotask. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start JavaScript Academy?

No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.

How long does the “Event Loop & Task vs Microtask Basics” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this JavaScript Academy lesson?

Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Event Loop & Task vs Microtask Basics
  2. Promises — States, Chaining, Error Handling
  3. Promise.all / any / race / allSettled — choose the right tool
← Back to JavaScript Academy