Comprendre le JavaScript synchrone et asynchrone

JavaScript exécute une tâche à la fois. C'est parce qu'il s'agit d'un langage mono-thread (single-threaded).

Pour créer des applications rapides, vous devez connaître la différence entre le code synchrone et asynchrone.

Exécution synchrone

Le code s'exécute ligne par ligne. Chaque tâche attend que la précédente soit terminée.

Imaginez une file d'attente à un distributeur automatique. La deuxième personne ne peut pas utiliser la machine tant que la première n'a pas fini.

Si une tâche prend beaucoup de temps, tout le programme s'arrête. C'est ce qu'on appelle le blocage (blocking).

Exécution asynchrone

Les tâches s'exécutent indépendamment. JavaScript lance une tâche et passe immédiatement à la suivante.

Imaginez un restaurant. Vous commandez votre plat, puis vous discutez avec vos amis en attendant. Vous ne restez pas immobile à attendre que le plat arrive avant de faire quoi que ce soit d'autre.

Le code asynchrone empêche votre application de se figer lors de :

  • requêtes API
  • requêtes de base de données
  • lecture de fichiers
  • téléchargements d'images

Trois façons de gérer le code asynchrone :

  1. Callbacks Une fonction s'exécute après la fin d'une tâche spécifique. C'est comme un livreur qui vous appelle lorsque votre repas arrive.

  2. Promises Une promesse représente un résultat futur. Elle reste dans un état en attente (pending) jusqu'à ce qu'elle soit soit résolue (success), soit rejetée (error).

  3. Async/Await Cela permet au code asynchrone de ressembler à du code synchrone. C'est facile à lire. Vous utilisez await pour mettre une fonction en pause sans bloquer le reste de votre programme.

Comment cela fonctionne en coulisses :

JavaScript utilise une Event Loop pour gérer ces tâches.

  • Call Stack : suit vos fonctions actuelles.
  • Web APIs : gère les tâches longues comme les minuteurs ou les requêtes (fetches).
  • Callback Queue : contient les tâches terminées.
  • Event Loop : déplace les tâches de la file d'attente vers la pile lorsque celle-ci est vide.

Comparaison :

Synchrone :

  • S'exécute séquentiellement
  • Bloque le programme
  • Simple à écrire
  • Lent pour les tâches lourdes

Asynchrone :

  • S'exécute indépendamment
  • Non bloquant
  • Plus complexe
  • Efficace pour les applications web

Maîtriser ces concepts est la clé pour utiliser React, Node.js et les API modernes.

Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript Full post: https://dev.to/annapoo/understanding-synchronous-and-asynchronous-javascript-5gea