Comprendre les générateurs JavaScript et la différence entre yield et yield étoile

Les générateurs JavaScript permettent de contrôler l'exécution d'une fonction étape par étape, au lieu de la laisser se dérouler d'un seul coup. Cette approche est dite « paresseuse » (lazy) : le code ne s'exécute que lorsque vous le demandez, ce qui évite de saturer la mémoire avec des boucles infinies ou de gros calculs.

Le mot-clé yield est central : il pause la fonction et renvoie une valeur. Pour reprendre l'exécution, vous appelez la méthode next() sur l'objet générateur. Chaque appel à next() fait avancer le code jusqu'au prochain yield.

Il existe une distinction importante entre yield et yield* : yield renvoie une valeur simple, tandis que yield* permet de déléguer l'exécution à un autre générateur. Cela signifie que vous pouvez itérer sur les valeurs produites par un générateur imbriqué, comme si le code interne était copié-collé dans votre fonction principale.

Exemple :

function* compteur() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const gen = compteur();
console.log(gen.next().value); // 0
console.log(gen.next().value); // 1

Ici, la boucle while (true) n'exécute qu'une itération par appel à next(). Sans générateur, cette boucle bloquerait le navigateur indéfiniment.