An insight into Javascript Generators

In the previous post written Eons ago we went through what generators are and and how the control shifts in and out of the function during the course of its execution. We also went through the next() call that drives the flow along with yield . In this write up we will delve deeper in to the generators’ flow along with Generator delegation,Symbol Iterators among other things.

Let us consider a generator function that yields multiple values. Now executing the .next() call for each yield is something that we can bypass using the for...of loops . This gives us the flexibility to loop through different kinds of data structures.

In the above example we create a vegetablesOnMyList() generator function , the aim is to add a new value using yield and push them into an array. Traditionally we would define the generator function , the flow then exits at each occurrence of the yield statement , goes out and searches for the .next() function and then re-enter the generator back at the very same yield point where it left . Now, executing the .next() function might appear a bit too cumbersome , a way out of this is by using the for...of loops, this runs through the generator function once per each yield call. In the above example we loop through our function and the result is pushed into an array.

In the above code snippet we have an object and say we need to iterate through only selective keys within the object . We create a generator with multiple yield statements to handle this use case, lets call it the UniversityIterator. This generator function is then fed to the for...of loop

In the above example we have another object project added to the mix and the idea is to have one generator function to iterate over both the objects, delegating from the top object into the second object. We do create a separate iterator for the projects object but that is eventually mapped to the main generator function that is fed to the for...of loop.

We trigger the second generator(ProjectIterator) from within the first generator(UniversityIterator) and pass on the object to it . In order to trigger the ProjectIterator we pass the projectGenerator to the yield statement. The detail array now loops through both the objects.

In the above code snippet , it would be great if the projects object could iterate over itself rather than having a separate function to do that. The [Symbol.iterator] key acts as a reference point to the for...of loop so that it can iterate over the given object. The this keyword in the above example points to the projects object.[Symbol.iterator] can be considered as a dynamically generated valid key value based on the ES6 key interpolation . The value here is a generator function on which the for...of loop runs. Since Symbol Iterators are being used here , we can get rid of the ProjectIterator function.

The University object is refactored to use the [Symbol.iterator] property. We employ Generator Delegation here to loop through the project object and since we don’t need the University Iterator generator , we get rid of it and loop through the University object directly in the for...of loop.

In this post I’ve tried to explore the use-cases of generators. This along with the previous introductory post should provide a good enough insight into how generators work in Javascript and how powerful they can be.

Related posts:

This article is written by one of the promising content creators of the FORSAGE Community. TalibahAset Nasiha El: The Money Metaphysician, Financial Rehabilitation Therapist, Founder of the…

From gene regulatory networks to agricultural pest control, there are numerous applications of Bayesian networks in biology. If you’re a biologist, or even a computer scientist, this list will help…