ES6 Iterators and Generators – 6 exercises and solutions


This article is a section from the workbook of ES6 in Practice. I created this course during the last couple of months, because there is an evident need for a resource that helps JavaScript developers put theory into practice.

This course won’t waste your time with long hours of video, or long pages of theory that you will never use in practice. We will instead focus on learning just enough theory to solve some exercises. Once you are done with the exercises, you can check the reference solutions, and conclude some lessons. In fact, some of the theory are sometimes placed in the reference solutions.

If you like this article, check out the course here.

In my last article, I gave you six exercises. In this article, you can check the reference solutions.

Exercise 1. What happens if we use a string iterator instead of an iterable object in a for-of loop?


Solution: Similarly to generators, in case of strings, arrays, DOM elements, sets, and maps, an iterator object is also an iterable.

Therefore, in the for-of loop, the remaining k letter is printed out.


Exercise 2. Create a countdown iterator that counts from 9 to 1. Use generator functions!


Solution:

The generator function yields the numbers 9 to 1. The spread (...) operator consumes all values. Then the generator function returns undefined, ending the iteration process.


Exercise 3. Make the following object iterable:


First Solution (well known symbol):

We could use well known symbols to make todoList iterable. We can add a *[Symbol.iterator] generator function that yields the elements of the array. This will make the todoList object iterable, yielding the elements of todoItems one by one.


Second solution (generator function): If you prefer staying away from well known symbols, it is possible to make your code more semantic:

The first solution reads a bit like a hack. The second solution looks cleaner even if you have to type more characters.


Exercise 4. Determine the values logged to the console without running the code. Instead of just writing down the values, formulate your thought process and explain to yourself how the code runs line by line.


Solution:

We created three iterables in total: it, one in the statement in the spread operator, and one in the for-of loop.

In the example with the next calls, the second call results in a thrown error.

In the spread operator example, the expression cannot be evaluated, because an error is thrown.

In the for-of example, the first element is printed out, then the error stopped the execution of the loop.


Exercise 5. Create an infinite sequence that generates the next value of the Fibonacci sequence.

The Fibonacci sequence is defined as follows:

  • fib( 0 ) = 0
  • fib( 1 ) = 1
  • for n > 1, fib( n ) = fib( n - 1 ) + fib( n - 2 )

Solution:

Note that you only want to get the next() element of an infinite sequence. Executing [...fibonacci()] will skyrocket your CPU usage, speed up your CPU fan, and then crash your browser.


Exercise 6. Create a lazy filter generator function. Filter the elements of the Fibonacci sequence by keeping the even values only.


Solution:

Notice how easy it is to combine generators and lazily evaluate them.

Lazy evaluation is essential when we work on a large set of data. For instance, if you have 1000 accounts, chances are that you don’t want to transform all of them if you just want to render the first ten on screen. This is when lazy evaluation comes into play.

If you would like to get five more chapters of this book, click YES below, and sign up.

Would you like to learn ES6?
Strengthen your JavaScript knowledge with marketable skills!
Get the Course "ES6 in Practice"!

Learn Marketable Skills.

Verify your knowledge with real world exercises.

Thank you for your subscription.
Please check your inbox to access the first lesson.

If you would prefer getting all the exercises and the book, visit this link, or click the image below.

es6package_3d