Mesmo após anos de experiência com programação, generator talvez tenha sido a ideia/conceito de programação que mais demorei a entender. Gosto de pensar que parte do motivo vem da forma como a mensagem é geralmente transmitida se tratando do assunto. Dito isso, a proposta desse artigo é tentar explicar generators de forma simples.

Anatomia

function* doSomething() { 
    ...
    yield someVariable;
    ...
}

A primeira coisa que deve ter notado é que, em sintaxe, generators se parecem bastante com funções. A diferença é que para definir um generator, precisamos usar a keyword function*.

Bem que poderia haver uma keyword generator, né? :p

Você também deve ter notado a keyword yield. Essa é um pouco mais complicada de explicar. O que posso dizer por enquanto é que uma das traduções diretas de yield é "produzir".

Comportamento

Para entender como os generators se comportam, vamos compará-los a uma função comum. Veja como geraríamos ou produziríamos IDs sequenciais sem o uso de generators:

let id = 0;

function generateId() {
    return ++id;
}

generateId(); // 1
generateId(); // 2

Nesse caso, o estado da nossa função fica fora de seu escopo. Em outras palavras, as variáveis necessárias para a função são definidas fora da definição dela própria. Isso é óbvio, já que se declarassemos a variável id dentro da definição da função, o valor dessa variável seria reiniciado a cada execução.

Porém, isso não é necessariamente verdade para generators porque o ciclo de vida deles pode durar mais de uma execução.

Isso é possível por conta de duas coisas:

• A keyword yield

  Pense nela como uma return especial. A diferença é que a yield retorna o valor da expressão à sua frente (assim como a return) sem finalizar a função.

• O retorno

  Diferente de funções, generators sempre retornam um objeto Generator. Esse objeto possui um método .next() que é capaz de reexecutar a função partindo do último yield até o próximo.

Vamos então vamos reescrever o gerador de IDs usando um generator:

function* generateId() { 
    let id = 0;
    
    yield ++id;
    yield ++id;
    
    return; // Desnecessário nesse caso
}

const idGenerator = generateId();

idGenerator.next().value; // 1
idGenerator.next().value; // 2

No entanto, esse generator tem uma limitação: ele só é capaz de gerar dois IDs. Então vamos refatorá-lo para que possa gerar infinitos IDs:

function* generateId() { 
    let id = 0;
    
    while (true) {
        yield ++id;
    }
}

const idGenerator = generateId();

idGenerator.next().value; // 1
idGenerator.next().value; // 2

Devido ao comportamento dos generators, pudemos por while (true) (sem bloquear o event loop) para sempre termos um novo yield e agora ele pode gerar infinitos IDs!

Isso não é lindo?!

Conclusão

Isso foi só a ponta do iceberg! Propositalmente deixei algumas "pontas soltas" para instigar a sua curiosidade, como "o que acontece ao executar .next() depois de todos os yield do generator serem retornados?" ou "para que serve a keyword return em um generator?".

Para a resposta dessas perguntas e explicação de todos os outros casos que não citei aqui, você pode consultar o artigo dedicado da MDN.

Espero que eu tenha te ajudado a avançar pelo menos um pouquinho no seu entendimento sobre generators. Abraços!