Learning JavaScript, 3rd Edition

Chapter 12. Iterators and Generators

ES6 introduces two very important new concepts: iterators and generators. Generators depend on iterators, so we’ll start with iterators.

An iterator is roughly analogous to a bookmark: it helps you keep track of where you are. An array is an example of an iterable object: it contains multiple things (like pages in a book), and can give you an iterator (which is like a bookmark). Let’s make this analogy concrete: imagine you have an array called book where each element is a string that represents a page. To fit the format of this book, we’ll use Lewis Carroll’s “Twinkle, Twinkle, Little Bat” from Alice’s Adventures in Wonderland (you can imagine a children’s book version with one line per page):

const book = [
   "Twinkle, twinkle, little bat!",
   "How I wonder what you're at!",
   "Up above the world you fly,",
   "Like a tea tray in the sky.",
   "Twinkle, twinkle, little bat!",
   "How I wonder what you're at!",
];

Now that we have our book array, we can get an iterator with its values method:

const it = book.values();

To continue our analogy, the iterator (commonly abbreviated as it) is a bookmark, but it works only for this specific book. Furthermore, we haven’t put it anywhere yet; we haven’t started reading. To “start reading,” we call the iterator’s next method, which returns an object with two properties: value (which holds the “page” you’re now on) and done, which becomes true after you read the last page. Our book is only six pages long, so it’s easy ...