A collection of lessons about generators in JavaScript to help developers understand how useful they can be in many common scenarios.

Every Array has a function which you can use to create an iterator. This function can only be accessed by using the `Symbol.iterator` as a key on the Array. Once you have created your iterator, you can use it to iterate through each value of the Array using `.next` or a `for loop`.

Use the Default Iterator from an Array

Iterators are the foundation of generators. Much of the misunderstanding around generators comes from the lack of understanding iterators. An iterator has a `Symbol.iterator` property with an object that contains a `next` method which defines what is output each iteration.

Create Your First Iterator in JavaScript

Using `Symbol.iterator`, you can create custom iterators that can be used inside of `for` loops and Array spreads. This lesson walks you through creating a function to create iterators from arrays that you pass into the function.

Create a Custom Iterator for Any Array

With a solid understanding of iterators, seeing the benefits of using generators becomes much more obvious. Generators allow us to write iterators with a much more concise syntax and give us more flexibility with each iteration.

Create Your First Generator in JavaScript

Generators allow your iterators to be stopped whenever you choose. The logic can be placed inside of the generate with a `return` statement or you can call a `return` method on the iterator itself to prevent the iterator from yielding any more values.

Stop a Generator from Yielding Values

Generators allow you to use the `yield *` syntax to yield each iteration of nested iterable as part of the main iterations. This enables you to combine multiple arrays, strings, or any iterable with anything you want to yield from your main generator.

Yield an Array, String, or Any Iterable from a Generator

Generators allow you to hook together multiple generators with the `yield*` syntax. This allows you to branch off into many different types of iterations within the main iteration and covers complex scenarios where you usually end up reaching for nested for loops.

Avoid Nested For Loops with Generators

A clear understanding of how iterations are defined and execute inside a generator is essentially to being able to use them properly. Each `next` call on the iterator runs inside the generator until it reaches a `yield` statement then the generator pauses until `next` is called again. When a `next` is called and no `yield` is found, then the generator assumes it is `done`.

Understand Each Iteration Inside a Generator

Generators emulate the behavior of a closure where they wrap an initial value then can take subsequent values through `next` to yield something based on that initial wrapped value. This lesson walks through creating a closure then re-creating the same behavior with a generator.

Use a Generator Like a Closure

Since generators can take initial values and expose a `next` method which can run updates on the initial value, it becomes trivial to make a state machine with a generator where you pass your transitions into the `next` method. This lesson walks through creating a state machine with a generator.

Create a State Machine with a Generator

Generator functions are great at generating data. You can create all types of functions that take params to define what sort of data to generate. The simplest example using a "start" and an "end" parameter to generate a range of numbers.

Create a `range` Helper Function with a Generator

Generators offer flexible alternatives to working with arrays and how you want to iterate through the data. While most scenarios are covered by the methods included on Arrays such as "map" and "filter", generators are great for covering complex scenarios when writing all your logic in map and filter functions might become difficult.

Generators in JavaScript

Instructor

Course Content