Protocolo iterável e for...of
Aprenda o protocolo iterável: Symbol.iterator, iterator.next() e o uso de for...of, spread e Array.from com pequenos exemplos personalizados
Protocolo iterável e for...of é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 1 de 3. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 3 aulas no total.
Visão geral
Objetivo: ler e criar iteráveis pequenos.
- O que significa iterável
- Symbol.iterator e iterator.next()
- for...of, expansão, Array.from
- Criar um exemplo de contador de 0 a N
for...of em elementos integrados
for...of funciona em iteráveis integrados, como matrizes e strings, produzindo os itens na ordem.
// Arrays and strings are iterable
const arr = [10, 20, 30];
for (const n of arr) {
console.log("arr item:", n);
}
const word = "JS";
for (const ch of word) {
console.log("char:", ch);
}
Iterável personalizado
Um iterável tem [Symbol.iterator](), que retorna um iterador cujo next() produz { value, done }.
// A tiny iterable that counts 0..max-1
const Counter = {
make: function (max) {
return {
max: max,
// Symbol.iterator returns an iterator object
[Symbol.iterator]: function () {
let i = 0;
return {
next: function () {
if (i < max) {
const out = { value: i, done: false };
i = i + 1;
return out;
}
return { value: undefined, done: true };
}
};
}
};
}
};
for (const x of Counter.make(3)) {
console.log("count:", x);
}
Iteração manual
Internamente, for...of chama next() repetidamente até done: true.
// You can drive the iterator manually
const iterable = Counter.make(2);
const it = iterable[Symbol.iterator]();
console.log(it.next()); // { value: 0, done: false }
console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: undefined, done: true }
Expansão e Array.from
Expansão e Array.from também usam o protocolo iterável para coletar valores.
// Spread (...) and Array.from consume iterables
const small = Counter.make(4);
const a1 = [...small];
const a2 = Array.from(Counter.make(3));
console.log("spread:", a1);
console.log("from :", a2);
Boas práticas
Dicas:
- Retorne um iterador novo a cada vez em [Symbol.iterator].
- Sempre termine com done: true para evitar loops infinitos.
- Mantenha o estado local dentro do fechamento do iterador.
Questionário sobre o protocolo iterável
Verificação rápida: tornar um objeto iterável.
Resumo
Resumo: elementos integrados, como matrizes, são iteráveis. Para criar o seu próprio, adicione [Symbol.iterator](), que retorna um iterador com next(). Use for...of, expansão ou Array.from para consumir valores.
Perguntas Frequentes
A aula “Protocolo iterável e for...of” é grátis?
Sim — o texto completo de “Protocolo iterável e for...of” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 3 aulas no total.
O que vou aprender em “Protocolo iterável e for...of”?
Aprenda o protocolo iterável: Symbol.iterator, iterator.next() e o uso de for...of, spread e Array.from com pequenos exemplos personalizados Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar JavaScript Academy?
Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 3.
Quanto tempo leva a aula “Protocolo iterável e for...of”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de JavaScript Academy?
Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Protocolo iterável e for...of
- Funções geradoras, yield e pequenos pipelines
- Iteradores assíncronos — for await...of e geradores assíncronos