La nature monothread de JavaScript/Typescript : programmation asynchrone

Dans mon premier article , j'ai écrit sur certaines des différences entre JS et TS.

Nous allons maintenant explorer la nature asynchrone en tant que langage à thread unique.

En JavaScript et TypeScript, la nature monothread signifie qu'une seule tâche peut être exécutée à un moment donné.

D'autre part, la programmation asynchrone fait référence à la capacité du langage à effectuer des tâches de manière asynchrone, permettant au fil d'exécution principal de continuer à s'exécuter en attendant que d'autres tâches se terminent. Ceci est réalisé grâce à l'utilisation de rappels , d'événements , de promesses et d'asynchrones / attentes .

Avant de commencer à les expliquer en termes de codage, je voudrais parler d'une référence très intéressante sur la façon dont les tâches asynchrones d'un langage à thread unique sont très similaires à notre cerveau lorsque nous essayons de faire du multitâche .

Dans cette section, je vais résumer un long texte / chapitre écrit par Kyle Simpson dans son livre "You Dont Know Javascript" sur la connexion de Sequential Brain avec l'asynchronisation. Si vous n'êtes intéressé que par la partie codage de son fonctionnement, vous pouvez ignorer cette partie.

« Je suis presque sûr que la plupart d'entre vous ont entendu quelqu'un dire (et même l'avoir affirmé vous-même) : « Je suis multitâche. «
Mais sommes-nous multitâches ? Pouvons-nous vraiment faire deux actions conscientes et intentionnelles à la fois et penser/raisonner sur les deux exactement au même moment ? Notre plus haut niveau de fonctionnalité cérébrale a-t-il un multithreading parallèle en cours ?

La réponse peut vous surprendre : probablement pas.

Ce n'est tout simplement pas vraiment la façon dont nos cerveaux semblent être configurés. Nous sommes beaucoup plus solitaires que beaucoup d'entre nous ne voudraient l'admettre. Nous ne pouvons vraiment penser qu'à une seule chose à un instant donné.

Je ne parle pas de toutes nos fonctions cérébrales involontaires, subconscientes et automatiques, telles que les battements du cœur, la respiration et le clignement des paupières. Ce sont toutes des tâches vitales pour notre vie soutenue, mais nous ne leur attribuons pas intentionnellement de puissance cérébrale.

Selon Simpson, les humains ne sont pas capables d'effectuer de véritables multitâches de la même manière qu'un ordinateur. S'il est vrai que le cerveau humain peut traiter plusieurs tâches simultanément, il n'est pas capable d'accorder la même attention à toutes les tâches à la fois. Au lieu de cela, nous basculons rapidement notre attention entre les tâches, un peu comme un programme à thread unique ne peut exécuter qu'une seule tâche à la fois.

Heureusement, alors que nous sommes obsédés par la vérification des flux de réseaux sociaux pour la 15e fois en trois minutes, notre cerveau continue en arrière-plan (threads !) avec toutes ces tâches importantes.

Lorsque nous simulons le multitâche, comme essayer de taper quelque chose en même temps que nous parlons à un ami ou à un membre de la famille au téléphone, ce que nous faisons très probablement est d'agir comme des commutateurs de contexte rapides . En d'autres termes, nous basculons rapidement entre deux tâches ou plus, progressant simultanément sur chaque tâche en petits morceaux rapides. Nous le faisons si vite que pour le monde extérieur, il semble que nous fassions ces choses en parallèle.

Cela ressemble-t-il à une simultanéité événementielle asynchrone (tout comme ce qui se passe dans JS) ? !

Il existe une grande différence observable entre la façon dont nous planifions diverses tâches et la manière dont notre cerveau gère réellement ces tâches.
Même si, au niveau opérationnel, nos cerveaux sont asynchrones, nous semblons planifier les tâches de manière séquentielle et synchrone. "Je dois aller au magasin, puis acheter du lait, puis déposer mon nettoyage à sec."

Pouvez-vous réellement imaginer avoir une ligne de pensée qui planifie vos courses à faire comme celle-ci :

" Je dois aller au magasin (1), mais en chemin je suis sûr que je vais recevoir un coup de téléphone (2) , alors 'Salut, maman', et pendant qu'elle commence à parler, je lèverai les yeux l'adresse du magasin (3) sur le GPS, mais ça va prendre une seconde à charger, donc je vais baisser la radio (4) pour mieux entendre maman…
puis je me rendrai compte que j'ai oublié de mettre une veste ( 5) et il fait froid dehors, mais peu importe, continuez à conduire et à parler à maman…
et puis le tintement de la ceinture de sécurité me rappelle de boucler ma ceinture (6) , alors 'Oui, maman, je porte ma ceinture de sécurité, je le fais toujours !'. Ah enfin :

le GPS a obtenu les directions, maintenant… »

Aussi ridicule que cela puisse paraître comme formulation de la façon dont nous planifions notre journée et réfléchissons à ce qu'il faut faire et dans quel ordre, c'est néanmoins exactement la façon dont notre cerveau fonctionne au niveau fonctionnel. Mais rappelez-vous, ce n'est pas du multitâche, c'est juste un changement de contexte rapide.

Dans cet esprit, examinons de plus près le fonctionnement de la programmation asynchrone en JavaScript.

Passons maintenant au codage :

Il existe plusieurs façons d'effectuer de la programmation asynchrone en JavaScript/Typescript, comme je l'ai mentionné au début de cet article, notamment en utilisant : Callbacks , Events, Promises, Async/Await.

• Un rappel est une fonction qui est transmise en tant qu'argument à une autre fonction et qui est exécutée une fois la fonction externe terminée. Par exemple:

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

function sayGoodbye() {
  console.log("Goodbye!");
}

greet("John", sayGoodbye);
// Output: "Hello, John!"
// Output: "Goodbye!"

• Un événement est un signal que quelque chose s'est produit, et un écouteur est une fonction qui est exécutée en réponse à cet événement. Par exemple:

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("Button was clicked!");
});

• Une promesse représente le résultat d'une opération asynchrone et peut être résolue (réussie) ou rejetée (échec), tout comme les promesses réelles ; lorsque vous faites une promesse, vous la tenez (résolvez) ou ne la refusez pas.
  Les promesses peuvent être utilisées pour simplifier le processus d'enchaînement des opérations asynchrones. Par exemple:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Completed Async Task");
  }, 1000);
});

promise.then((result) => {
  console.log(result);
});
// Output: "Async task completed" (after 1 second)

• Async/wait : une fonctionnalité de JavaScript qui permet l'utilisation de la syntaxe async/wait pour que le code asynchrone ressemble et se comporte comme du code synchronisé. Async/wait est construit sur des promesses et facilite le travail avec du code asynchrone.

async function greet(name) {
  return `Hello, ${name}!`;
}

async function main() {
  const greeting = await greet("John");
  console.log(greeting);
}

main();
// Output: "Hello, John!"

Dans l'ensemble, la programmation asynchrone permet l'exécution de plusieurs tâches tout en conservant la nature monothread du langage. Il permet un programme plus réactif et efficace en permettant au thread principal de continuer à s'exécuter en attendant que d'autres tâches se terminent.

Si vous aimez ce contenu n'hésitez pas à suivre. Il y a beaucoup d'autres projets en cours sur lesquels je prévois d'écrire dans un avenir proche. Jusque là,

Merci pour la lecture!