Use the Default Iterator from an Array

Create Your First Iterator in JavaScript

Create a Custom Iterator for Any Array

Create Your First Generator in JavaScript

Stop a Generator from Yielding Values

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

Avoid Nested For Loops with Generators

Understand Each Iteration Inside a Generator

Use a Generator Like a Closure

Create a State Machine with a Generator

Create a `range` Helper Function with a Generator

Compare a Generator to Using Array Map and Filter

Generators in JavaScript

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`.

John Lindquist: [0:00] If you look at the array prototype array.prototype inside of a console log and expand this here and scroll down you'll see all of the methods available. The one we're interested in is the one called symbol.iterator.

[0:14] This is the key where we can access a function. These are all functions listed here. It's a key that will access a function that will give us back an iterator.

[0:24] We'll go ahead and create an array called ABCs and type in A, B, C, and access on ABCs with the symbol.iterator key this function.

[0:37] We'll go ahead and invoke that and that will give us back an iterator. Let's check out what the iterator says it is, and we'll hit Save here. We can see it's an array iterator.

[0:49] Now with an iterator, we can call .next. Each time I call .next, it'll give us the value and whether or not it is done. The first value is A, and it's not done yet. There are still values left.

[1:03] If we invoke it twice, we'll get A and B, and it's not done either time. We'll invoke it two more times, and you'll A, B, C, and done true, meaning it's gone through every iteration that the iterator provided for us.

[1:21] Now this iterator, or an object with a .next on it that returns a value and a done satisfies a contract between itself and a for loop. If I say for, we'll do let value of iterator and just console log out the value. We'll hit Save here, and you can see we get A, B, and C back.

[1:42] So the for loop is going to pull out the value that's returned from calling iterator.next each time, and it's also going to advance the iterator one iteration each time that's called.

[1:53] For example, if we try to do this again, we'll hit Save here, you'll see we only get that first A, B, and C. Anytime we would try to call that console log iterator.next that value is undefined and done as true.

[2:07] So we could invoke that as many times as we want, but we keep getting done true, and we only iterate through those first three values. And because the iterator was used here, anything afterwards will be done.

[2:18] If you wanted to iterate through again, you would create second iterator. We'll call this secondIterator. This time, we can go ahead and just duplicate this, call this secondIterator, hit Save here, and we'll have A, B, C, A, B, C because now we have two separate iterators that both came from the same array instance.

[2:41] What's going on is that when you create this iterator from this function that's on every array, it's binding that array and locking it inside of that iterator, so that iterator still has access to the array values.

[2:55] For example, if you tried to not invoke here and just name this function createIterator, and then if you tried to createIterator, hit Save, you'll see that it's throwing out undefined and nulls because this is not bound to the proper object, which we can solve just by binding it to ABCs.

[3:16] Now we can use this createIterator function and say iterator is createIterator, and do that same for-of loop, where we're loop through iterator and log out all the values and get A, B, and C.

[3:33] On each and every array you ever create, you can use the symbol.iterator to access a function, which can create iterators, and then use those iterators to loop through the values of the arrays.

Course

Generators in JavaScript

Use the Default Iterator from an Array

Share this video with your friends