Como funcionam os geradores em JavaScript, em comparação com funções normais?

Os geradores em JavaScript são funções que podem pausar a sua execução e retornar valores intermédios usando a palavra-chave yield. Ao contrário das funções normais, que são executadas completamente e retornam um único valor, os geradores permitem criar iteradores com geração preguiçosa de valores.

Exemplo de gerador:

function* countUpTo(max) {
  let count = 1;
  while (count <= max) {
    yield count; // pausa a execução e devolve o valor
    count++;
  }
}

const counter = countUpTo(3);
console.log(counter.next().value); // 1
console.log(counter.next().value); // 2
console.log(counter.next().value); // 3
console.log(counter.next().done);  // true

Assim, os geradores são úteis para trabalhar com sequências de dados que não precisam de ser calculadas de imediato na totalidade.