JavaScript - Les générateurs

Les générateurs JavaScript sont une technique de fonction puissante à la disposition des développeurs JavaScript. Ils permettent d'écrire des fonctions asynchrones de façon plus propre et plus structurée. Mais qu'est-ce qu'un générateur, au juste ?

Un générateur est une fonction spéciale qui permet au développeur de renvoyer des valeurs étape par étape, au lieu de toutes les renvoyer d'un coup. Les générateurs peuvent aussi servir à créer des itérateurs. Une fonction définie comme générateur peut renvoyer plusieurs valeurs grâce au mot-clé « yield ».

Voici un exemple qui montre comment créer un générateur simple en JavaScript :

function* idGenerator() {
  let id = 0;
  while(true) {
    yield id++;
  }
}

let gen = idGenerator();
console.log(gen.next().value); // Ausgabe: 0
console.log(gen.next().value); // Ausgabe: 1
console.log(gen.next().value); // Ausgabe: 2

Dans cet exemple, on définit une fonction génératrice « idGenerator » qui contient une boucle while infinie renvoyant à chaque tour un identifiant incrémenté de 1. La valeur de l'identifiant est renvoyée grâce au mot-clé « yield ». On initialise une instance de cette fonction génératrice avec « let gen = idGenerator() », puis on affiche trois identifiants en appelant trois fois « console.log(gen.next().value) ».

La sortie du code ci-dessus sera « 0 », « 1 » et « 2 ».

Les générateurs peuvent aussi prendre en charge des fonctions asynchrones en utilisant « yield » pour suspendre le code et attendre le résultat d'une opération asynchrone avant d'exécuter la ligne de code suivante. Voici un exemple qui montre comment créer un générateur asynchrone en JavaScript :

function* asyncIdGenerator() {
  let id = 0;
  while(true) {
    yield fetch('https://jsonplaceholder.typicode.com/todos/' + id)
      .then(response => response.json())
      .then(data => data.id);
    id++;
  }
}

let gen = asyncIdGenerator();
gen.next().value.then(val => console.log(val)); // Ausgabe: 1
gen.next().value.then(val => console.log(val)); // Ausgabe: 2

Dans cet exemple, la même fonction génératrice « idGenerator » est utilisée, mais au lieu d'un simple incrément de l'identifiant, une fonction asynchrone récupère des données depuis une API et renvoie l'identifiant extrait de la réponse. La méthode « fetch » sert à récupérer les données, et le mot-clé « yield » sert à suspendre l'exécution de la fonction génératrice jusqu'à la fin de l'opération asynchrone. On initialise une instance de cette fonction génératrice avec « let gen = asyncIdGenerator() », puis on affiche deux identifiants en appelant deux fois « console.log(gen.next().value.then(val => console.log(val))) ». La sortie du code ci-dessus sera « 1 » et « 2 ».