Tip 41: Create Iterable Properties with Generators

In Tip 14, Iterate Over Key-Value Data with Map and the Spread Operator, you learned how simple it is to loop over maps thanks to iterables. And once you can iterate over a collection, you have access to the spread operator, array methods, and many other tools to transform your data. Iterables give your data more flexibility by allowing you to access each piece of data individually.

You also know that objects don’t have a built-in iterator. You can’t loop over an object directly—you need to convert part of it to an array first. That can be a major problem when you want the structure of an object but the flexibility of an iterable.

In this tip, you’ll learn a technique that can make complex data structures as easy to use as simple arrays. You’re going to use a new specialized function called a generator to return data one piece at time. In the process, you’ll see how you can convert a deeply nested object into a simple structure.

Generators

Generators aren’t exclusive to classes. They’re a specialized function. At the same time, they’re very different from other functions. And while the JavaScript community has enthusiastically embraced most new features, they haven’t quite figured out what to do with generators. In late 2016, a poll by Kent Dodds, a popular JavaScript developer, found ...