56. Co to jest event loop w JavaScript i jak działa?

Co to jest Event Loop w JavaScript i jak działa?

Event loop to podstawowa koncepcja w JavaScript, szczególnie w kontekście operacji asynchronicznych. JavaScript jest językiem jednordzeniowym, co oznacza, że ma jeden stos wywołań i może wykonywać jedną operację na raz. Jednak JavaScript potrafi obsługiwać operacje asynchroniczne dzięki event loop.

Jak to działa:

1. Stos Wywołań (Call Stack): To miejsce, w którym wykonywany jest kod. Działa według zasady LIFO (Last In, First Out). Kiedy funkcja jest wywoływana, dodawana jest do stosu, a po ukończeniu jest usuwana.

2. Web APIs: Gdy wykonywane są operacje asynchroniczne jak setTimeout, wywołania AJAX czy zdarzenia DOM, są one obsługiwane przez Web APIs przeglądarki, które są oddzielone od silnika JavaScript.

3. Kolejka Zdarzeń (Callback Queue): Po zakończeniu operacji asynchronicznej, jej funkcja zwrotna jest dodawana do kolejki zdarzeń.

4. Event Loop: Event loop stale sprawdza, czy stos wywołań jest pusty. Jeśli jest, pobiera pierwszą funkcję zwrotną z kolejki i umieszcza ją na stosie do wykonania.

Przykład:

console.log('Start');

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

console.log('End');

Wynik:

Start
End
Timeout callback

W tym przykładzie setTimeout jest operacją asynchroniczną, więc jej funkcja zwrotna jest dodawana do kolejki. Event loop czeka, aż stos wywołań będzie pusty (po wyświetleniu 'End'), zanim wykona funkcję zwrotną.

Dlaczego to ważne:

Event loop pozwala JavaScript na wykonywanie operacji nieblokujących, co umożliwia efektywne zarządzanie operacjami I/O, interakcjami z użytkownikami i wywołaniami API bez zamrażania interfejsu użytkownika.

Zrozumienie event loop jest kluczowe dla pisania wydajnych aplikacji w JavaScript, szczególnie w kontekście zadań asynchronicznych.