Iteradores e Geradores em JavaScript: Domine o Fluxo

Neste tutorial, vamos explorar de forma narrativa o funcionamento de Iteradores e Geradores em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente.. Eles permitem controlar o fluxo de iteração em coleções, bem como criar processos de produção de valores de forma assíncrona (ou sob demanda). Abordaremos a arquitetura interna dos Iteradores, a utilização de Generators para simplificar a criação desses iteradores e, por fim, veremos como aplicar essas técnicas em cenários práticos.

O que são Iteradores em JavaScript?🔗

A ideia fundamental dos iteradores em JavaScript é fornecer um protocolo padronizado para percorrer estruturas de dadosFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web.. Com o Protocolo de Iteração, é possível criar mecanismos especializados que permitem:

Controlar a ordem em que elementosTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. são acessados;
Fornecer novos valores sob demanda;
Encapsular a lógica de iteração em um objetoFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. específico.

Em JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente., qualquer objeto que implemente o método next() e retorne um objetoFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. no formato:

{
  value: <algum valor>,
  done: <booleano>
}

pode ser considerado um iterador.

Criando um Iterador Manualmente

Considere que queremos percorrer uma listaListas Ordenadas e Não Ordenadas: `<ul>`, `<ol>`, `<li>`Aprenda a criar listas ordenadas e não ordenadas em HTML. Descubra exemplos práticos e boas práticas para organizar conteúdos e facilitar a compreensão. de frutas de forma personalizada. Podemos criar um iterador manual:

function criarIterador(frutas) {
  let indice = 0;
  return {
    next: function() {
      if (indice < frutas.length) {
        return { value: frutas[indice++], done: false };
      } else {
        return { value: undefined, done: true };
      }
    }
  };
}
const frutas = ["Maçã", "Banana", "Pera"];
const meuIterador = criarIterador(frutas);
console.log(meuIterador.next()); // { value: "Maçã", done: false }
console.log(meuIterador.next()); // { value: "Banana", done: false }
console.log(meuIterador.next()); // { value: "Pera", done: false }
console.log(meuIterador.next()); // { value: undefined, done: true }

Observe que, cada vez que chamamos next(), recebemos o próximo elementoTags e Elementos: Sintaxe e HierarquiaDescubra os fundamentos do HTML: aprenda sobre tags, elementos, hierarquia e boas práticas para criar páginas bem estruturadas e acessíveis. na listaListas Ordenadas e Não Ordenadas: `<ul>`, `<ol>`, `<li>`Aprenda a criar listas ordenadas e não ordenadas em HTML. Descubra exemplos práticos e boas práticas para organizar conteúdos e facilitar a compreensão.. Quando esgotamos as frutas, done passa a ser true.

O Protocolo Iterável (Iterable)🔗

Para que objetosFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. funcionem com forEstruturas de Controle: if, switch e loopsAprenda as estruturas de controle em JavaScript, como if/else, switch e loops, com exemplos claros e didáticos para otimizar seu código e lógica de programação....of, spread operatorDestructuring, Spread e Rest OperatorsAprenda detalhadamente a utilizar Destructuring, Spread e Rest em JavaScript para escrever códigos mais limpos, concisos e eficientes com este tutorial prático, ou outras construções que dependem de iteração, eles devem expor o métodoClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. especial SymbolVariáveis, Tipos de Dados e OperadoresAprenda os conceitos essenciais de JavaScript, explorando variáveis, tipos de dados e operadores com exemplos claros e práticas dicas de programação..iterator. Um arrayFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. nativo já fornece isso internamente, por isso podemos iterar arraysFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. facilmente:

const frutas = ["Maçã", "Banana", "Pera"];
for (const fruta of frutas) {
  console.log(fruta);
}

No caso de objetosFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. personalizados, precisamos nós mesmos criar esse comportamento. Por exemplo:

const carrinho = {
  itens: ["Fone", "Mouse", "Monitor"],
  [Symbol.iterator]() {
    let indice = 0;
    let itens = this.itens;
    return {
      next() {
        if (indice < itens.length) {
          return { value: itens[indice++], done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};
for (const produto of carrinho) {
  console.log(produto);
}

Agora, carrinho passa a ser iterável e pode ser percorrido com forEstruturas de Controle: if, switch e loopsAprenda as estruturas de controle em JavaScript, como if/else, switch e loops, com exemplos claros e didáticos para otimizar seu código e lógica de programação....of.

Introduzindo Geradores (Generators)🔗

Para facilitar a criação de iteradores, o JavaScriptIntrodução ao JavaScript e Configuração do AmbienteDescubra neste tutorial narrativo como configurar seu ambiente de desenvolvimento e começar a programar em JavaScript de maneira prática e eficiente. fornece uma sintaxe especial chamada funçãoFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. geradora (ou Generator Function), que é marcada pelo símbolo . Em conjunto com a palavra-chave yield, criamos um fluxo de valores de forma muito mais elegante:

function* meuGerador() {
  yield "Primeiro valor";
  yield "Segundo valor";
  yield "Terceiro valor";
}
const iterador = meuGerador();
console.log(iterador.next()); // { value: "Primeiro valor", done: false }
console.log(iterador.next()); // { value: "Segundo valor", done: false }
console.log(iterador.next()); // { value: "Terceiro valor", done: false }
console.log(iterador.next()); // { value: undefined, done: true }

Funcionamento Interno dos Geradores

Internamente, funçõesFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. geradoras retornam um objetoFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. que implementa o protocolo iterador. Cada vez que invocamos next(), a execução do gerador retoma do ponto exato onde tinha parado, até encontrar outro yield ou finalizar a funçãoFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas..

Vantagens dos Generators:

1. Facilitam a leitura do código.

2. Permitem criar fluxos de dados sob demanda.

3. Podem cooperar com funçõesFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. assíncronas ou lógicas complexas passo a passo.

Uso Avançado de Geradores🔗

Delegando Geração com yield

Podemos delegar a produção de valores para outro generator usando yield. Isso permite compor geradores de forma modular. Por exemplo:

function* geradorA() {
  yield "A1";
  yield "A2";
}
function* geradorB() {
  yield "B1";
  yield* geradorA(); // delega para geradorA
  yield "B2";
}
const iteradorB = geradorB();
console.log(iteradorB.next()); // { value: 'B1', done: false }
console.log(iteradorB.next()); // { value: 'A1', done: false }
console.log(iteradorB.next()); // { value: 'A2', done: false }
console.log(iteradorB.next()); // { value: 'B2', done: false }
console.log(iteradorB.next()); // { value: undefined, done: true }

Interação da Função Geradora com next(), throw() e return()

Um gerador possui métodosClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. adicionais que podem ser usados após obtê-lo via nomeDoGerador():

next(valor): Responde à chamada anterior de yield, permitindo injetar dados na funçãoFunções e Escopo no JavaScriptAprenda a utilizar funções e escopos em JavaScript com nosso guia prático. Melhore sua organização de código e evolua seus projetos com boas práticas. geradora.
throw(erro): Lança um erro dentro do gerador, podendo capturar via try/catch dentro do gerador.
return(valor): Encerra o gerador imediatamente, definindo done = true.

Exemplos Práticos🔗

Paginação Sob Demanda

Imagine que precisamos buscar páginas de dados de um serviço externo, mas não sabemos ao certo quantas páginas serão necessárias. Podemos criar um gerador para simular a busca página a página:

function* buscarPaginas(totalDePaginas) {
  let paginaAtual = 1;
  while (paginaAtual <= totalDePaginas) {
    // Simulando uma busca
    yield `Conteúdo da página ${paginaAtual}`;
    paginaAtual++;
  }
}
const paginas = buscarPaginas(3);
for (const conteudo of paginas) {
  console.log(conteudo);
}

Esse é um cenário perfeito para quando não queremos carregar todos os dados de uma só vez, mas sim consumir sob demanda.

Criação de Iteradores Personalizados com Generator

Em vez de criar iteradores manualmente usando [SymbolVariáveis, Tipos de Dados e OperadoresAprenda os conceitos essenciais de JavaScript, explorando variáveis, tipos de dados e operadores com exemplos claros e práticas dicas de programação..iterator] e next(), podemos simplificar com geradores:

const minhaColecao = {
  itens: [10, 20, 30],
[SymbolVariáveis, Tipos de Dados e OperadoresAprenda os conceitos essenciais de JavaScript, explorando variáveis, tipos de dados e operadores com exemplos claros e práticas dicas de programação..iterator]() {
    for (let item of this.itens) {
      yield item * 2; // Processando de forma customizada
    }
  }
};
for (const valor of minhaColecao) {
  console.log(valor);
}

Aqui, o objetoFundamentos de Arrays e ObjetosDomine arrays e objetos em JavaScript com este tutorial narrativo. Aprenda a utilizar métodos e exemplos práticos para aprimorar seu desenvolvimento web. minhaColecao se torna iterável com a implementação de um gerador no lugar do métodoClasses e Herança em ES6+Aprenda a dominar classes e herança em ES6+: escreva códigos JavaScript claros e eficientes com métodos, getters e setters. SymbolVariáveis, Tipos de Dados e OperadoresAprenda os conceitos essenciais de JavaScript, explorando variáveis, tipos de dados e operadores com exemplos claros e práticas dicas de programação..iterator.