0Pricing
JavaScript Academy · Leçon

Fonctions génératrices, yield et petits pipelines

Écrivez des fonctions génératrices avec function*, utilisez yield pour produire paresseusement des valeurs, pilotez-les avec for...of ou next() et composez de petits pipelines

Fonctions génératrices, yield et petits pipelines est une leçon JavaScript Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 3. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage JavaScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours JavaScript Academy comprend 3 leçons au total.

Pourquoi utiliser des générateurs ?

Objectif : produire des valeurs à la demande avec des générateurs.

  • function* définit un générateur
  • yield produit des valeurs étape par étape
  • Utilisez for...of ou next() pour les parcourir
  • Composez de petites chaînes de traitement (semblables à map)
Fonctions génératrices, yield et petits pipelines — illustration 1

function* et yield

Les générateurs utilisent function* et yield. L'itération reprend à partir du dernier yield.

// A basic generator that yields 1..n lazily
function* countTo(n) {
  for (let i = 1; i <= n; i = i + 1) {
    yield i; // pause here and give i to the caller
  }
}

for (const x of countTo(3)) {
  console.log("value:", x);
}
Fonctions génératrices, yield et petits pipelines — illustration 2

next() manuel

next() avance parmi les yield et renvoie finalement done: true une fois terminé.

// You can also drive a generator manually with next()
const it = countTo(2);

console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: 2, done: false }
console.log(it.next()); // { value: undefined, done: true }
Fonctions génératrices, yield et petits pipelines — illustration 3

Nombres pairs de façon différée

Les générateurs sont parfaits pour de simples flux, comme les nombres pairs, sans commencer par construire de grands tableaux.

// Yield even numbers up to n (inclusive)
function* evensUpTo(n) {
  for (let i = 0; i <= n; i = i + 1) {
    if (i % 2 === 0) {
      yield i;
    }
  }
}

console.log("evens 0..6:", [...evensUpTo(6)]);
Fonctions génératrices, yield et petits pipelines — illustration 4

Chaîne de traitement map différée

Composez de petites étapes : transmettez un générateur à un autre pour créer des chaînes de traitement différées.

// map() as a generator: transform values lazily
function* map(iterable, fn) {
  for (const v of iterable) {
    yield fn(v);
  }
}

const doubled = map(countTo(4), function (x) { return x * 2; });
console.log("doubled:", [...doubled]);
Fonctions génératrices, yield et petits pipelines — illustration 5

Bonnes pratiques

Conseils :

  • Appelez la fonction génératrice pour obtenir un itérateur (elle ne s'exécute pas entièrement à l'avance).
  • yield met l'exécution en pause ; return termine la séquence.
  • Une fois terminé, un générateur est épuisé ; appelez à nouveau la fonction pour obtenir un nouvel itérateur.
Fonctions génératrices, yield et petits pipelines — illustration 6

Question sur la valeur renvoyée par un générateur

Vérification rapide : que renvoie une fonction génératrice ?

Fonctions génératrices, yield et petits pipelines — illustration 7

Récapitulatif

Récapitulatif : définissez function*, produisez les valeurs avec yield de façon différée, consommez-les avec for...of ou next(), puis composez de petites chaînes de traitement de générateurs pour effectuer des transformations simples.

Fonctions génératrices, yield et petits pipelines — illustration 8

Questions Fréquemment Posées

La leçon « Fonctions génératrices, yield et petits pipelines » est-elle gratuite ?

Oui — le texte complet de « Fonctions génératrices, yield et petits pipelines » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours JavaScript Academy, passe à CoddyKit PRO. Le cours JavaScript Academy comprend 3 leçons au total.

Qu'est-ce que j'apprendrai dans « Fonctions génératrices, yield et petits pipelines » ?

Écrivez des fonctions génératrices avec function*, utilisez yield pour produire paresseusement des valeurs, pilotez-les avec for...of ou next() et composez de petits pipelines Tu pratiques JavaScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer JavaScript Academy ?

Aucune expérience préalable n'est requise. JavaScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 3.

Combien de temps prend la leçon « Fonctions génératrices, yield et petits pipelines » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon JavaScript Academy ?

Oui. Chaque leçon JavaScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Protocole itérable et for...of
  2. Fonctions génératrices, yield et petits pipelines
  3. Itérateurs asynchrones — for await...of et générateurs asynchrones
← Retour à JavaScript Academy