# JS Tip of the Day: Generators for Iterables

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-generators-for-iterables/643160>\
**Category:** web dev\
**Created:** [March 7, 2020, 12:14pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-generators-for-iterables/643160 "2020-03-07T12:14:08Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [March 7, 2020, 12:14pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-generators-for-iterables/643160/1 "2020-03-07T12:14:08Z")

</div>

**Generators for Iterables**  
Version: ES2015  
Level: Intermediate

Generator functions are functions that make generator objects. Generator objects are iterables which means they can be iterated over using a `for...of` loop or spread using spread syntax (`...`) in arrays and function call argument lists. The values iterated over for a generator object are those yielded by it’s generator function. If you ever need an iterable with the output of a dynamic set of values, using a generator might be the way to go.

To make a generator function, you would use the normal function declaration syntax but follow the `function` keyword with an asterisk `*`. Any value preceded by the `yield` operator within that function becomes a value provided to the iteration of the generator object it creates when called.

```javascript
function * makeGenerator () {
    yield 1;
    yield 2;
    yield 3;
}

let myGenerator = makeGenerator();
console.log([...myGenerator]); // [1, 2, 3]

```

While arrays are iterable, normal JavaScript objects are not. We can use a generator function to allow us to iterate over an object’s values with a for…of loop.

```javascript
function * valuesIn (obj) {
    for (let key in obj) {
        yield obj[key];
    }
}

let pets = { cat: 'Purrseus', dog: 'Barkansas' };
for (let name of valuesIn(pets)) {
    console.log(name);
}
/* logs:
Purrseus
Barkansas
*/

```

If you’re familiar with the builtin `Object.values()`, this behaves much in the same way except that `Object.values()` creates an array first. Then when you iterate over the values, you iterate through that array. With `valuesIn` above, you’re not creating the intermediary array first. When you iterate over the values of a `valuesIn` generator, you are stepping through the `for...in` loop directly.

`valuesIn` is just a simple example, but you can imagine doing a lot more in generator functions. They can be a powerful tool for managing iteration or creating iterable objects. Future tips will explore their use further.

More info:

- [function\* on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)
- [yield on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/yield)
- [Generator objects on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator)
- [for…of on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of)
- [Spread syntax on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax)