Parle-moi de la boucle d'événements (event loop)…

La boucle d'événements est la base du travail asynchrone en JavaScript. Elle contrôle l'exécution du code, la gestion des événements et l'interaction avec le monde extérieur.

Composants principaux:

Heap (Tas): Zone de mémoire pour l'allocation d'objets.
Pile (Stack): Endroit où sont stockés les contextes d'exécution des fonctions. Lorsqu'une fonction est appelée, elle est placée dans la pile, et lorsqu'elle se termine, elle est supprimée.
Web APIs: Interfaces fournies par le navigateur (DOM, AJAX, Timers, etc.). Elles gèrent les opérations asynchrones.
File d'attente des callbacks (Callback Queue): File de messages liés aux événements. Web APIs y placent les callbacks des opérations asynchrones terminées.
Boucle d'événements (Event Loop): Surveille en permanence la pile et la file de callbacks. Si la pile est vide, elle prend le premier callback de la file et le place dans la pile pour exécution.

Processus:

Le code synchrone s'exécute dans la pile.
Les opérations asynchrones (par exemple, setTimeout, fetch) sont envoyées aux Web APIs.
Lorsqu'une opération asynchrone est terminée, son callback est placé dans la file de callbacks.
La boucle d'événements attend que la pile devienne vide.
Lorsque la pile est vide, la boucle d'événements prend le premier callback de la file et le place dans la pile, où il s'exécute.

Exemple avec setTimeout:

console.log('Start');

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

console.log('End');

La sortie sera:

Start
End
Inside setTimeout

Malgré le timeout de 0 ms, le callback de setTimeout s'exécute après le code synchrone car il entre dans la file d'attente et attend que la pile se vide.

Dans Node.js, il existe aussi une boucle d'événements, mais avec quelques différences dans les phases de gestion des files.

Parle-moi de la boucle d'événements (event loop).