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.

Lesson 1 of 38 steps

Event Loop & Task vs Microtask Basics is a free JavaScript Academy lesson on CoddyKit. This is lesson 1 of 3. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 3 lessons in total.

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");

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

Answer it in the interactive lesson

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

Free to start

Learn JavaScript with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 59
Lessons: 200

Start learning free View the full course

Frequently Asked Questions

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

Yes — any 3 lessons of the JavaScript Academy learning path, including “Event Loop & Task vs Microtask Basics”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 3 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 3.

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

Event Loop & Task vs Microtask Basics
Promises — States, Chaining, Error Handling
Promise.all / any / race / allSettled — choose the right tool

← Back to JavaScript Academy