O `yield` é como um `return` em funções geradoras, ou seja quando a função lê o `yield` dá devolve a expressão que está depois dele (as strings que tens) e pausa a execução da função. 

Quando chamas de novo o `.next()` acontece a mesma coisa com o próximo `yeld`, retornando a próxima variável, etc. Quando o `yield` retorna a expressão que tem a seguir (na mesma linha) não deixa nada para o `let` e por isso eles vão ficando com valor `undefined`. 

No final o ultimo `.next()` chama na verdade o `return` da função, pois chamaste 3 vezes o `.next()` e os `yield` já deram o seu retorno, antes do 4<sup>o</sup> `yield` a função ficou em pause depois de fazer o `yield` de "c", e então esse último `.next()` vai invocar o `return` da ultima linha.

Repara no exemplo em baixo onde coloquei `console.log(typeof foo, foo);` dentro da função e que confirma que as variáveis vão ficando `undefined`.


<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    function* gerador() {
        let foo = yield "a"
        let bar = yield "b"
        let baz = yield "c"
        
        console.log(typeof foo, foo); // repara que aqui dá undefined

        return `${foo} ${bar} ${baz}`
    }

    let gen = gerador();
    console.log(gen.next()); // dá { value: 'a', done: false }
    console.log(gen.next()); // dá { value: 'b', done: false }
    console.log(gen.next()); // dá { value: 'c', done: false }
    console.log(gen.next()); // chama o return e dá { value: 'undefined undefined undefined', done: true }

<!-- end snippet -->