Part 3: pass data dynamically to a generator function

This is a continuation of Understanding Generators series. The previous article explained how a basic generator function works under the hood.

We will be looking at this code snippet to understand how to pass data to a generator function.

function* createFlow() {
  const num = 10;
  const newNum = yield num;
  yield 5 + newNum;
}
const returnNextElement = createFlow();
const element1 = returnNextElement.next();
const element2 = returnNextElement.next(2);

This diagram illustrates what is happening under the hood when JS engine runs the code snippet above.

(1) At first, JS declares a variable createFlow and assign to it the whole generator function definition.

Get Sveta Buben’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

(2) Secondly, it declares a variable returnNextElement which is undefined at the beginning. JS executes a generator function and assigns to returnNextElement variable a returned value from this execution. The invocation of createFlowgenerator function returns a special generator object. This object has some properties on it, but the one we are interested in here is next property. If we call .next() method for the first time it will create a new Execution Context for createFlowgenerator function, as next method has a special bond to the createFlow generator function, which allows creating an Execution Context for it. Subsequent calls of next method will re-enter this context till the moment that done (next method returns an object with properties value and done; for brevity, the diagram returns a value only) property is equal to true.

(3) Afterward, JS declares a new variable element1 in global memory which is undefined for now. It goes and executes returnNextElement.next function and assigns to element1 a value that is being returned from returnNextElement.next function. When the invocation of returnNextElement starts a new Execution Context of the generator function is being created. (a) Firstly, num variable is being declared in a local function memory. The value assigned to it is 10. (b) The next line that is being run is const newNum = yield num. In the local function memory, JS creates a variable newNum and assign it to undefined for a moment. When JS hits the special word yield it immediately returns num variable value, without managing to assign anything yet to newNum variable. At this moment it is still undefined.

(4) At last, JS declares a variable element2, initially assigning to it a value of undefined. It will be equal to a returned value of running returnNextElement.next method. This time next method is being called with an argument 2. This is a value that will be assigned to newNum, as yield caused immediate return from a function leaving newNum undefined. (d) yield 5 + newNum resolves to yield 5 + 2. Therefore, 7 is being returned and assigned to element2 variable.

Did you manage to read through the diagram and explanation attached to it? Please leave your comment 💖

☞ The following article in this series will explain async generators

Resources:
☛ https://frontendmasters.com/courses/javascript-new-hard-parts/ — by Will Sentance