JavaScript: The Recent Parts

Iterator & Generator Exercise

Kyle Simpson

Kyle Simpson

You Don't Know JS
JavaScript: The Recent Parts

Check out a free preview of the full JavaScript: The Recent Parts course

The "Iterator & Generator Exercise" Lesson is part of the full, JavaScript: The Recent Parts course featured in this preview video. Here's what you'd learn in this lesson:

Students are instructed to implement an iterator and generator to log lucky numbers.


Transcript from the "Iterator & Generator Exercise" Lesson

>> Kyle Simpson: All right, so interators and generators. They are an exciting topic, but it is hard to kind of wrap your brain around until you've actually put your fingers on the keyboard and tried it yourself. So you're gonna get a chance with this particular exercise. Here's what you're gonna be creating.

You're gonna take this numbers object which we've defined here on lines 1, 2, and 3, and you're going to make it an iterable object. But it's not gonna be iterating over any data that it has, it's going to be producing data sort of virtually. And what you want it to do is that if you do a default iteration over it, like you see with the for of loop, you want it to be able to spit out the values from 0 up to 100, incrementing by 1.

So you should define a symbol.iterator on it that can loop out all of those values, yield out all of those values from 0 to a 100. However, that's only the default iteration. We also want to support customizing the iteration by calling the iterator directly and passing in certain information.

So we want to be able to tell it I want the numbers object to iterate from 6 up to 30 step counting by 4, and that should be able to print out those values. Now, what you see here is a reference to being able to print out those values, which means you're gonna wanna turn this into a template literal.

And you're gonna wanna iterate over the numbers object and put it into an array that can then be stringified. So you're probably gonna wanna use something like the hint here, which is dot, dot, dot, spreading out the iterator into an array, and then dropping the array in. So make sure to take note of that hint.

But your numbers symbol.iterator is just a regular function, so it needs to take some inputs. Using what you know about Destructuring, you should have some named inputs that have some defaults where the default is to start at 0 and end at 100, stepping by 1. And then you should be able to call that function and use some named arguments.

So in other words, we're pulling together a variety of things that we talked about so far into one exercise. This is not actually that many lines of code, maybe a total of five to eight lines of code. But the real trick here is to think about how do I bring each of these pieces together?

Start by figuring out how do I define my iterator? How do I pass it some inputs? And how do I iterate over it? Okay, so we would normally take probably about ten minutes or so for this exercise, so we'll come back in a few minutes, and we'll talk about the solution.

As always, if you get a bit stuck on this exercise, feel free to take a look at the ex.fixed solution file.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now