JavaScript
Explica el protocolo iterable, los iteradores con next, Symbol.iterator, consumo perezoso, cierre anticipado y diferencias frente a arrays y fuentes asíncronas.
Un iterable es un valor que sabe crear un recorrido. Un iterador es el objeto que entrega los valores de ese recorrido uno a uno.
const values = ["A", "B", "C"];
const iterator = values[Symbol.iterator]();
iterator.next();
// { value: "A", done: false }iterator.next();
// { value: "B", done: false }iterator.next();
// { value: "C", done: false }
iterator.next();
// { value: undefined, done: true }Tiene un método bajo la clave Symbol.iterator.
const iterable = {
[Symbol.iterator]() {
return iterator;
},
};Su responsabilidad es crear o entregar un iterador.
Tiene un método next.
const iterator = {
next() {
return {
value: "A",
done: false,
};
},
};Su responsabilidad es recordar el progreso y producir registros de iteración.
Cada llamada a next() retorna un objeto.
{
value: 10,
done: false,
}value: valor producido.done: indica si la secuencia terminó.Al terminar:
{
value: undefined,
done: true,
}Un iterador puede incluir un valor final junto con done: true, aunque for...of normalmente no expone ese valor final.
Muchos iteradores estándar implementan:
iterator[Symbol.iterator]() === iterator;Eso permite utilizarlos directamente en for...of.
const iterator = values.values();
for (const value of iterator) {
console.log(value);
}Este patrón se llama iterable iterator.
Varias partes del lenguaje solicitan Symbol.iterator.
for (const value of iterable) {
console.log(value);
}const values = [...iterable];const [first, second] = iterable;const values = Array.from(iterable);new Set(iterable);
new Map(iterableOfPairs);El Map necesita que cada valor producido pueda interpretarse como un par [key, value].
Son iterables, entre otros:
NodeList en navegadores modernos.Un objeto normal no es iterable automáticamente.
const user = {
name: "Nicolás",
role: "developer",
};
// [...user] produce TypeError.Puedes recorrer sus propiedades mediante Object.entries.
for (const [key, value] of Object.entries(user)) {
console.log(key, value);
}const arrayLike = {
0: "A",
1: "B",
length: 2,
};Tiene índices y length, pero no Symbol.iterator.
// [...arrayLike] produce TypeError.
Array.from(arrayLike); // ["A", "B"]Array.from acepta iterables y también objetos array-like; spread exige un iterable.
function createRange(start, end) {
return {
[Symbol.iterator]() {
let current = start;
return {
next() {
if (current > end) {
return {
value: undefined,
done: true,
};
}
return {
value: current++,
done: false,
};
},
};
},
};
}Uso:
for (const number of createRange(1, 3)) {
console.log(number);
}
// 1, 2, 3Cada llamada a Symbol.iterator crea un recorrido independiente.
const range = createRange(1, 3);
[...range]; // [1, 2, 3]
[...range]; // [1, 2, 3]Un iterable suele poder crear otro iterador.
const values = [1, 2, 3];
[...values];
[...values];Un iterador concreto mantiene progreso y normalmente se consume una sola vez.
const iterator = values.values();
[...iterator]; // [1, 2, 3]
[...iterator]; // []No se reinició; ya terminó.
const iterator = values.values();El iterador necesita recordar qué posición sigue. Ese estado no tiene que estar expuesto como una propiedad pública.
Cada iterador nuevo puede mantener un progreso independiente.
const first = values.values();
const second = values.values();
first.next(); // 1
first.next(); // 2
second.next(); // 1Un iterador puede implementar return() para limpiar recursos cuando el consumo termina antes de tiempo.
const iterable = {
[Symbol.iterator]() {
let current = 0;
return {
next() {
return {
value: current++,
done: false,
};
},
return() {
console.log("Closed");
return {
value: undefined,
done: true,
};
},
};
},
};for (const value of iterable) {
if (value === 2) {
break;
}
}
// "Closed"for...of solicita el cierre del iterador ante ciertas salidas abruptas.
Esto es útil para liberar lectores, archivos, conexiones o estados temporales controlados por una abstracción.
Un iterador puede lanzar un error desde next.
next() {
throw new Error("Cannot read next item");
}El consumidor recibe ese error.
No utilices { done: true } para ocultar un fallo que debería ser visible; finalización normal y error son contratos diferentes.
Un iterador produce valores cuando se solicitan.
const iterator = createLargeSequence();
iterator.next();No necesita construir obligatoriamente todo un array antes de comenzar.
Eso puede ayudar con:
Sin embargo, perezoso no significa asíncrono ni garantiza que el hilo no se bloquee. Un consumidor síncrono que solicite millones de valores seguirá ejecutando trabajo síncrono.
El estándar moderno ofrece un objeto global Iterator y helpers perezosos para transformar iteradores.
const result = Iterator.from([1, 2, 3, 4])
.filter((value) => value % 2 === 0)
.map((value) => value * 10)
.toArray();
// [20, 40]Entre los helpers se encuentran:
map.filter.flatMap.take.drop.reduce.toArray.forEach.some.every.find.Estas operaciones consumen o producen iteradores y evitan arrays intermedios en transformaciones perezosas.
const iterator = Iterator.from(iterable);Normaliza un iterable o iterador dentro del sistema de helpers.
const firstThree = Iterator.from(numbers)
.take(3)
.toArray();ECMAScript 2026 incorpora una operación estática para concatenar iterables de forma perezosa.
const combined = Iterator.concat(
[1, 2],
new Set([3, 4]),
createRange(5, 6),
);
combined.toArray();
// [1, 2, 3, 4, 5, 6]No necesita construir previamente un gran array combinado.
Los helpers de iteradores son APIs recientes. Comprueba soporte en el runtime objetivo o utiliza una alternativa compatible cuando sea necesario.
Un array:
length.Un iterador:
Elige según el contrato, no solo por ahorrar memoria.
function mapIterable(iterable, transform) {
return {
*[Symbol.iterator]() {
for (const value of iterable) {
yield transform(value);
}
},
};
}const doubled = mapIterable(
createRange(1, 3),
(value) => value * 2,
);
[...doubled]; // [2, 4, 6]Los helpers estándar reducen la necesidad de construir estas utilidades manualmente, pero entender el protocolo permite reconocer qué hacen.
Un iterable asíncrono utiliza Symbol.asyncIterator y su next produce promesas.
const iterator = source[Symbol.asyncIterator]();
const result = await iterator.next();Se consume con for await...of.
for await (const value of source) {
console.log(value);
}Se profundizará en el bloque de asincronía. No es lo mismo que un iterable síncrono que simplemente contiene promesas.
function createPageSequence(fetchPage) {
return {
async *[Symbol.asyncIterator]() {
let page = 1;
while (true) {
const result = await fetchPage(page);
if (result.items.length === 0) {
return;
}
yield result.items;
page++;
}
},
};
}El consumidor puede solicitar páginas gradualmente sin conocer de antemano la cantidad total.
El detalle completo de async generators se estudiará después.
done coherente.Symbol.iterator.next y produce { value, done }.for...of, spread y destructuring consumen iterables.return permite cierre anticipado.¿Por qué el segundo spread devuelve un array vacío?
const iterator = [1, 2, 3].values();
[...iterator];
[...iterator];Porque el primer spread consumió el iterador hasta done: true. El objeto conserva su progreso y no se reinicia. Debe crearse otro iterador desde el iterable original.
Generadores ofrecen una sintaxis más directa para crear iteradores pausables y mantener su estado entre cada valor producido.