With a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator">generator function</a>, values are not evaluated until they are needed. Therefore a generator allows us to define a potentially infinite data structure.
The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator/next">next()</a> method returns an object with two properties done and value. You can also provide a parameter to the next method to send a value to the generator. The value will be assigned as a result of a yield expression.
<ol>
<li>Because <code>Grouping Operator</code> gets evaluated first, the generator function <code>gen</code> yields/returns 100</li>
<li>Since we have passed <code>1</code> to the next() method. <code>yield 100</code> is basically replaced with 1 and it returns 2*1 = 2</li>
<li>Since generator is completed it returns <code>undefined</code></li>
</ol>
<pre class="shiki github-dark shaku"><code>function* gen() { yield 2 * (yield 100)}const generator = gen()console.log(generator.next().value) // 100console.log(generator.next(1).value) // 2console.log(generator.next(1).value) // undefined</code></pre>

Generators explained

What does the code snippet to the right output by console.log?…