12

Vi em alguns trechos de código a palavra-chave yield*. Ela é diferente do yield?

Pesquisando sobre, cheguei a o seguinte exemplo de código:

function* g1() {
  yield 2;
  yield 3;
  yield 4;
}

O que faz o * ao lado da keyword function? Tem a ver com o * ao lado de yield?

1 Resposta 1

32

Geradores

A sintaxe function* é utilizada para definir um gerador e yield é o análogo a return para um gerador.

O que é?

Gerador é considerado como uma função especial, responsável por criar um iterador. É caracterizado por calcular cada item pertencente ao elemento iterável por vez, ao invés de armazená-los todos em memória, como é feito sem o gerador. Característica esta que é conhecida por lazy evaluation.

Exemplo

Consideremos a sequência de Fibonacci, que cada elemento consiste na soma dos dois elementos anteriores. Sem utilizar um gerador, poderíamos fazer:

function fibonacci(n) {
  let sequence = [];
  
  sequence.push(0, 1);
  
  for (let i = 2; i < n; i++) {
    sequence.push(sequence[i - 1] + sequence[i - 2]);
  }
  
  return sequence;
}

const sequence = fibonacci(10);

console.log(sequence.length);

O código acima irá gerar uma saída igual a 10, referente ao número de posições armazenadas em memória para a sequência. Para quantias pequenas, isso não afetaria a aplicação, mas se considerarmos um valor gigantesto, tal como um milhão de elementos, isso provavelmente afetaria o rendimento da sua aplicação.

Com o uso do gerador:

function* fibonacci(n) {
  let a = 0, b = 1, current;
  
  while (true) {
    current = a;
    
    yield current;
    
    a = b;
    b = current + b;
  }
}

const sequence = fibonacci(10);

for (let i = 0; i < 10; i++) {
  console.log(sequence.next().value);
}

Os elementos da lista não estarão em memória quando fizermos const sequence = fibonacci(10), os mesmos serão calculados dentro do for, apenas quando forem utilizados, através de sequence.next(). Mas e se a lista precisar ter um milhão de elementos? Sem problemas, como os elementos não ficam em memória, o gerador não afetará na sua aplicação (tempo de execução continuaria alto, pois continuaria a ser executado milhões de operações, mas na memória, não seria afetado).

Iterador

O retorno de um gerador é um iterador e, portanto, implementa o método next.

Tabela que descreve o método next.

Utilização

Imagine que você deseja exibir uma lista com todos os nomes das cidades do Brasil, que totalizam um número de aproximadamente 5570, utilizando infinite scroll. Armazenar em memória os dados destes 5570 registros seria desnecessário, pois dificilmente o usuário usará todos eles. Então você poderia exibir em tela uma quantidade inicial, 20 por exemplo, e quando o usuário requerir mais, ao atingir o final da lista, fazer, com o gerador, uma requisição AJAX para o servidor solicitando mais 10 registros e adicionando-os à lista. Desta forma, os 5570 registros só estariam em memória se o usuário solicitasse isso.

Relacionados

A sequência de Fibonacci, embora não muito utilizada na prática, foi usada como exemplo devido a facilidade de implementação.

7
  • Interessante! Então para operações desse tipo convém usar a mecânica do yield mesmo? Visto que ela possui impacto muito menor no uso de memória.. Commented 22/03/2017 às 12:58
  • Caramba que resposta. +1
    – Marconi
    Commented 22/03/2017 às 12:58
  • Muito obrigado! Se eu pudesse dar +2 eu dava, por causa da ideia de usar em infinite scroll, que é uma prática muito comum nos meus projetos! Commented 22/03/2017 às 13:04
  • @ArturTrapp, adicionei o comentário à resposta.
    – Woss
    Commented 22/03/2017 às 13:09
  • Existe alguma maneira de transformar um gerador em array diretamente?
    – Miguel
    Commented 22/03/2017 às 13:10

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .