How does the yield keyword really work in JavaScript ES6 Generators? [duplicate]

Question

I'm tackling Generators in ES6, and I would like to understand, conceptually, what's happening in the function below:

function* createNames() {
    const people = [];

    people.push(yield);
    people.push(yield);
    people.push(yield);

    return people;
}

const iterator = createNames();
iterator.next('Brian');
iterator.next('Paul');
iterator.next('John');
iterator.next(); // output: ["Paul", "John", undefined]

My question is: why does the first push is ignored? Shouldn't the array be something like people = ['Brian', 'John', 'Paul', undefined]? Sorry for the silly question, but I would really love to be able to fully grasp this. Thanks in advance!

Answer 1

Invoking createNames() does not execute any of the code inside of the generator. It creates an instance of an iterator, and execution begins on the first next() call.

const iterator = createNames(); 
// Iterator instance created, but hasn't executed yet.

iterator.next('Brian');
// creates the people array
// attempts to push, yields
iterator.next('Paul');
// pushes 'Paul'
// attempts to push, yields
iterator.next('John');
// pushes 'John'
// attempts to push, yeilds
iterator.next(); 
// pushes undefined
// returns ["Paul", "John", undefined]