Why is this iterator returning the following values?
<p>I was reading <a href="https://davidwalsh.name/es6-generators" rel="nofollow">this article about javascript generators</a>, and I reached the following snippet:</p>

<pre><code>function *foo(x) {
    var y = 2 * (yield (x + 1));
    var z = yield (y / 3);
    return (x + y + z);
}

var it = foo( 5 );

// note: not sending anything into `next()` here
console.log( it.next() );       // { value:6, done:false }
console.log( it.next( 12 ) );   // { value:8, done:false }
console.log( it.next( 13 ) );   // { value:42, done:true }
</code></pre>

<p>I don't understand the purpose of the first <code>it.next()</code>. After executing it, this line, shouldn't the iterator be paused at <code>var z = yield (y / 3)</code>, with y having the value of 6? Shouldn't <code>it.next(12)</code> supply the param for <code>yield (y / 3)</code>, and z be 4 after this?  I don't understand why the result of the function is not  5 + 12 + 4. It's somehow as if the first <code>it.next()</code> is ignored. Is this the case? Can someone please shed some light?</p>