So sánh Microtask và Macrotask trong JavaScript qua ví dụ thực tế dễ hiểu

Xin chào mọi người, mình là [Tên bạn] đây!

Gần đây khi ôn phỏng vấn, mình thấy có rất nhiều câu hỏi xoay quanh Event Loop, Microtask, Macrotask trong JavaScript. Bài viết này sẽ giúp bạn phân biệt rõ ràng 2 loại task này qua ví dụ minh họa dễ hiểu.

1. Event Loop là gì?

Event Loop là cơ chế giúp JavaScript xử lý bất đồng bộ (async). Dù chỉ chạy trên 1 luồng (single-threaded), nhưng nhờ Event Loop, JavaScript vẫn có thể “làm nhiều việc một lúc”.

2. Microtask vs Macrotask

3. Ví dụ minh họa

console.log('Start');

setTimeout(() => {
  console.log('Macrotask - setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Microtask - Promise');
});

console.log('End');