JavaScript event loop async کام کو کیسے سنبھالتا ہے؟

Question

Accepted Answer

JavaScript ایک **واحد thread** پر چلتا ہے، تو یہ ایک وقت میں صرف ایک کام کر سکتا ہے۔ **Event loop** وہ ہے جو async کام کو بغیر روک دھام کے سنبھالنے دیتا ہے: یہ call stack کو چلاتا ہے، اور جب stack خالی ہو، تو queues سے callbacks کھینچتا ہے۔

مختلف ترجیحوں کے ساتھ دو queues ہیں:
- **Microtasks**: Promise callbacks (`.then`), `queueMicrotask`۔ ہر task کے بعد، rendering سے پہلے **بالکل** خالی کیے جاتے ہیں۔
- **Macrotasks**: `setTimeout`, I/O, UI events۔ ہر loop iteration میں ایک پروسیس کیا جاتا ہے۔

```js
console.log("1");                         // sync
setTimeout(() => console.log("2"), 0);    // macrotask
Promise.resolve().then(() => console.log("3")); // microtask
console.log("4");                         // sync
// Output: 1, 4, 3, 2
```

## یہ ترتیب کیوں

1. Synchronous code پہلے چلتا ہے: `1`, `4`۔
2. Stack خالی ہو جاتا ہے → **تمام microtasks** کو خالی کریں: `3`۔
3. پھر **ایک macrotask** لیں: `2`۔

یہی وجہ ہے کہ `Promise.then` ہمیشہ **ایک** `setTimeout(…, 0)` سے پہلے چلتا ہے، حالانکہ دونوں "async" ہیں — microtasks کو ترجیح ہے۔

## ایک عملی نتیجہ

```js
// ❌ blocks the single thread — UI freezes for 5 seconds
while (Date.now() - start < 5000) {}
```

لمبے synchronous کام سب کچھ روکتے ہیں (rendering, clicks)۔ بھاری CPU کام کو ایک **Web Worker** کو (ایک اصل علیحدہ thread) منتقل کریں۔

## یہ اہم کیوں ہے

Loop کو سمجھنا async ترتیب کی وضاحت کرتا ہے، کہ promises کیوں timers سے پہلے resolve ہوتے ہیں، اور کہ main thread کو کبھی کیوں روکا نہیں جانا چاہیے — تمام async JavaScript کے لیے بنیادی ذہنی نمونہ۔