Q21. What is the event loop in JavaScript?

JavaScript একসাথে একটাই কাজ করে (single-threaded)। Event loop হলো সেই ব্যবস্থা যা সিনক্রোনাস কাজ শেষ হলে অপেক্ষায় থাকা কাজগুলো একে একে চালায় — যাতে পেজ থেমে না যায়।

এর তিনটি প্রধান অংশ আছে — Call stack (এখন চলতে থাকা কাজ), Microtask queue (Promise-এর কাজ) আর Task queue বা macrotask queue (setTimeout, event handler-এর কাজ)।

console.log("1");

setTimeout(() => console.log("2"), 0); // task queue

Promise.resolve().then(() => console.log("3")); // microtask

console.log("4");

// আউটপুট: 1, 4, 3, 2

ধাপে ধাপে চলে। প্রথমে console.log("1") সাথে সাথে চলে। তারপর setTimeout কিছুই এখনই না করে টাইমার সেট করে task queue-তে বসে, আর Promise.resolve().then() microtask queue-তে বসে। এরপর console.log("4") চলে।

সব সিনক্রোনাস কাজ শেষ হলে event loop প্রথমে সম্পূর্ণ microtask queue খালি করে — তাই আসে 3। তারপর task queue থেকে 2 চলে। ফলে setTimeout(..., 0) দিলেও সেটা Promise-এর পরেই চলে।

// দুই ধরনের task
setTimeout(() => console.log("timeout"), 0);

setInterval(() => console.log("interval"), 100);

queueMicrotask(() => console.log("microtask"));

requestAnimationFrame(() => console.log("animation"));

// requestAnimationFrame সাধারণত task-এর আগে চলে

একটি লম্বা সিনক্রোনাস কাজ চলাকালীন setTimeout বা Promise-এর কাজ কোনোদিন চলতে পারে না — এটিই event loop-এর সবচেয়ে বড় সীমাবদ্ধতা।

console.log("শুরু");

// ভুল — পুরো হিসাব আগে শেষ হবে
for (let i = 0; i < 1e9; i++) {}

console.log("শেষ");

// ভালো — কাজ ভাগ করে দেওয়া
function run() {
  if (moreWork()) setTimeout(run, 0);
}
run();