Casos de Uso para Generadores en JavaScript

Los generadores de JavaScript (function*) han sido parte del lenguaje desde ES2015, sin embargo, muchos desarrolladores frontend todavía recurren a arrays o cadenas de promesas cuando los generadores serían una opción más limpia. El valor principal no es la velocidad pura — es la evaluación diferida (lazy evaluation), composabilidad y control preciso sobre la iteración. Este artículo cubre dónde los generadores realmente se ganan su lugar en el código frontend moderno.

Qué Hace Diferentes a los Generadores de JavaScript

Una función generadora devuelve un iterador. Llamar a la función no ejecuta ningún código — te entrega un objeto con un método .next(). Cada llamada a .next() ejecuta el cuerpo de la función hasta el siguiente yield, luego se pausa, preservando el estado local entre llamadas.

function* range(start, end) {
  for (let i = start; i < end; i++) yield i
}

for (const n of range(0, 5)) {
  console.log(n) // 0, 1, 2, 3, 4
}

Debido a que los generadores implementan el protocolo de iterador, funcionan directamente con for...of, sintaxis spread y desestructuración — no se necesita adaptador.

Iteración Diferida en JavaScript: Procesando Datos Sin Materializarlos

La razón principal para usar un generador en lugar de un array es la iteración diferida: los valores se producen solo cuando se solicitan. Esto importa cuando:

• El conjunto de datos completo es grande y solo necesitas parte de él
• Calcular cada valor es costoso
• La secuencia es conceptualmente infinita

function* naturals() {
  let n = 0
  while (true) yield n++
}

// Solo calcula valores hasta el punto de interrupción
for (const n of naturals()) {
  if (n > 100) break
}

No se crea ningún array intermedio. No se calculan valores más allá del punto de interrupción.

La API Iterator Helpers: Pipelines Diferidos Integrados

Escribir utilidades personalizadas de map, filter y take solía ser código repetitivo necesario. La API Iterator Helpers — ahora disponible en todos los navegadores modernos — añade estos métodos directamente a los iteradores síncronos:

const result = naturals()
  .filter(n => n % 2 === 0)
  .map(n => n * n)
  .take(5)
  .toArray() // [0, 4, 16, 36, 64]

Cada paso es diferido. .toArray() es lo que desencadena la evaluación. Esto hace que los pipelines basados en generadores sean significativamente más limpios sin bibliotecas de terceros. Ten en cuenta que estos helpers se aplican a iteradores síncronos — los helpers de iteradores asíncronos aún no están estandarizados en todos los entornos.

Recorrido de Árboles y Grafos

Los generadores son una opción natural para recorrer estructuras recursivas. El recorrido en profundidad (depth-first) de un árbol similar al DOM se vuelve directo:

function* walkTree(node) {
  yield node
  for (const child of node.children ?? []) {
    yield* walkTree(child)
  }
}

for (const node of walkTree(rootNode)) {
  if (node.type === 'input') processInput(node)
}

yield* delega a un generador anidado, manteniendo la recursión legible y el recorrido diferido — te detienes tan pronto como encuentras lo que necesitas.

Generadores Asíncronos en JavaScript: Obtención de Datos Paginados y por Lotes

async function* extiende el patrón a secuencias asíncronas. Combinado con for await...of, es ideal para respuestas de API paginadas:

async function* fetchPages(url) {
  let nextUrl = url
  while (nextUrl) {
    const res = await fetch(nextUrl)
    const data = await res.json()
    yield data.items
    nextUrl = data.nextPage ?? null
  }
}

for await (const batch of fetchPages('/api/records')) {
  processBatch(batch)
}

Cada página se obtiene solo cuando el bucle avanza. No hay necesidad de recopilar todas las páginas por adelantado o gestionar el estado de paginación externamente — el generador lo mantiene.

Cuándo No Usar Generadores

Los generadores añaden indirección. Para una transformación simple de array que consumirás completamente, los métodos encadenados de array son más claros. Usa generadores cuando la secuencia sea grande, potencialmente infinita, o cuando necesites detenerte temprano sin computación desperdiciada.

Conclusión

Los generadores de JavaScript brillan en tres áreas: iteración diferida sobre secuencias grandes o infinitas, pipelines de datos componibles (especialmente con la API Iterator Helpers), y obtención de datos asíncrona donde necesitas control secuencial y con estado. No son un reemplazo para arrays o async/await — son la herramienta correcta cuando necesitas producir valores bajo demanda en lugar de todos a la vez.

Preguntas Frecuentes

Complete picture for complete understanding

Capture every clue your frontend is leaving so you can instantly get to the root cause of any issue with OpenReplay — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data.

Check our GitHub repo and join the thousands of developers in our community.