# JS Tip of the Day: Create Iterable Objects

**URL:** <https://forum.kirupa.com/t/js-tip-of-the-day-create-iterable-objects/643154>\
**Category:** web dev\
**Created:** [March 13, 2020, 3:59pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-create-iterable-objects/643154 "2020-03-13T15:59:31Z")\
**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 13, 2020, 3:59pm UTC](https://forum.kirupa.com/t/js-tip-of-the-day-create-iterable-objects/643154/1 "2020-03-13T15:59:31Z")

</div>

**Create Iterable Objects**  
Version: ES2015  
Level: Advanced

We’ve seen that you can make iterable objects (generators) using generator functions, but you can also turn any ordinary object into an iterable. To do this, all you need is to have a `Symbol.iterator` property on the object which is a function that returns an iterator object when called. The returned iterator will be used to generate the iterable values within that object. The easiest way to do this? With another generator function of course!

```javascript
let accounts = {
    checking: 5,
    savings: 0.25
};
for (let balance of accounts) { // TypeError: not iterable
    console.log(balance);
}

```

```javascript
// making accounts an iterable
accounts[Symbol.iterator] = function * () {
    for (let key in this) {
        yield `${key}: $${this[key].toFixed(2)}`;
    }
};
for (let balance of accounts) { // now works
    console.log(balance);
}
/* logs:
checking: $5.00
savings: $0.25
*/

```

Even though objects are not normally iterable, once the `accounts` object was given the `Symbol.iterator` property, it became an iterable and was able to work within the `for...of`. It’s the existence of a `Symbol.iterator` property that makes any object an iterable.

Objects like arrays are inherently iterable because they already have this property. In the case of arrays, their iterator method is the same as their `values()` method.

```javascript
let array = [1, 2, 3];
console.log(typeof array[Symbol.iterator]); // function
console.log(array[Symbol.iterator] === array.values); // true

```

The same applies to generator objects created by generator functions. What’s interesting about generator objects is that their `Symbol.iterator` is simply a function that returns the generator object.

```javascript
function * makeOne () {
    yield 'There can be only one';
}

let highlander = makeOne();
console.log(highlander[Symbol.iterator]() === highlander); // true

```

If you ever want to make an object an iterable, or even change the default iterable behavior, all you need to do is to define its `Symbol.iterator`.

And in case you were wondering, the syntax for specifying a `Symbol.iterator` generator in an object literal (or class) directly would be as follows, using the `accounts` example from earlier:

```javascript
let accounts = {
    checking: 5,
    savings: 0.25
    * [Symbol.iterator] () { // generator function
        for (let key in this) {
            yield `${key}: $${this[key].toFixed(2)}`;
        }
    }
};

```

More info:

- [Iteration protocols on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols)
- [Symbol.iterator on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/iterator)
- [function\* on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*)