Blogs | Jerry Clark Ian Cabuntucan

Ano nga ba ang Event Loop?

Ang Event Loop ay isang mekanismong ginagamit ng JavaScript para ma-handle ang asynchronous code—yung mga code na hindi agad natatapos, tulad ng setTimeout, fetch, o mga Promises.

Sa madaling salita: Si Event Loop ang taga-balanse ng mga bagay-bagay para hindi mag-freeze ang browser habang may hinihintay ka (e.g. network request, delay, etc.).

Analogy

Isipin mo nasa coffee shop ka.

Ikaw yung JavaScript Engine (nag-e-execute ng code).
May umorder ng kape (asynchronous task).
Hindi ka maghihintay na matapos yung barista (hal. setTimeout()), move on ka agad sa next customer (next line of code).
Kapag ready na ang kape, tatawagin ka na lang ng barista (callback function)—doon papasok si Event Loop para i-handle ito.

Paano Gumagana ang Event Loop?

May 3 pangunahing bahagi:

Call Stack — Dito pinapatakbo ang mga regular functions (synchronous).
Web APIs (or browser APIs) — Dito pinoproseso ang mga async tasks tulad ng
Callback Queue (a.k.a Task Queue) — Kapag tapos na yung async task, ilalagay dito ang callback.

Si Event Loop ay patuloy na nagche-check:

“Busy ba ang Call Stack? Kung hindi, kunin natin yung next callback sa Queue!”

Sample Code

console.log('Start');

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

console.log('End');

Output:

Start  
End  
Timeout

Bakit hindi “Timeout” agad? Kasi yung setTimeout ay pinasa sa Web API, tapos binalik lang sa queue AFTER ma-execute lahat ng nasa call stack. Kaya “End” muna bago “Timeout”.

Bakit Mahalaga ‘To?

Kung gusto mong maging mahusay sa JavaScript, lalo na sa paggamit ng Promises, async/await, at event listeners, kailangan mo maintindihan ang Event Loop.

Hindi sapat na gumagana lang ang code—dapat alam mo bakit ganun ang behavior niya.

Summary