Event loop ya JavaScript inashughulikaje kazi ya async?

Question

Accepted Answer

JavaScript inaendeshwa kwenye **thread moja**, kwa hivyo inaweza kufanya kitu kimoja tu kwa wakati mmoja. **Event loop** ndilo linalo-ruhusu kushughulikia kazi ya async bila kusimamisha: inacheza call stack, na wakati stack ni tupu, hukokota callbacks kutoka kwenye queues.

Kuna queues mbili zilizo na kipaumbele tofauti:
- **Microtasks**: Promise callbacks (`.then`), `queueMicrotask`. Zilizo-drained **kabisa** baada ya kila task, kabla ya rendering.
- **Macrotasks**: `setTimeout`, I/O, UI events. Moja inachakatwa kwa kila iteration ya loop.

```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
```

## Kwa nini hiyo mpangilio

1. Msimbo wa synchronous unachakatwa kwanza: `1`, `4`.
2. Stack inakufa → drain **microtasks zote**: `3`.
3. Kisha chukua **macrotask moja**: `2`.

Hii ndio sababu `Promise.then` daima inaendeshwa **kabla ya** `setTimeout(…, 0)`, ingawa zote ni "async" — microtasks ina kipaumbele.

## Matokeo ya vitendo

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

Kazi ndefu ya synchronous inasimamisha kila kitu (rendering, clicks). Hamisha kazi nzito ya CPU kwa **Web Worker** (thread tofauti halisi).

## Kwa nini kina umuhimu

Kuelewa loop kunaeleza mpangilio wa async, kwa nini promises zinarejea kabla ya timers, na kwa nini kamwe usisimamishe thread kuu — mfano wa ziada wa akili wa kila kitu cha async JavaScript.