O `yield` é como um `return`, ou seja quando a função vir o `yield` dá retorno com a expressão que está depois dele (as strings que tens). Aí pausa a execução da função. 

Quando chamas o `.next()` de novo acontece a mesma coisa com a próxima variável, etc. `yield` retorna diretamente a função e 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 a função ficou em pause depois de fazer o `yeld` de "c".


<!-- 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());
    console.log(gen.next());
    console.log(gen.next());
    console.log(gen.next());

<!-- end snippet -->