Create our own iterable in JavaScript
Tags: javascript, typescript
Published: 2020-11-26 15:00:04

In this article we are going to see how we can create our iterator and iterable objects. 😎

Usually when we are creating an Array object in JavaScript, we are creating an iterable object that have iterator Symbol (symbol is just data type like string, boolean, etc, for more information check out [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol)), and this symbol object will let us go throw objects inside the array using for of loop. 🤗

Okay, first let's see our simple way of creating iterable objects 🧐

```javascript
const ourArray = [1, 2, 3, 4, 5];

for (const el of ourArray) {
    console.log(el);
}

// out put will be 1 2 3 4 5
```

Now let's create our own iterator and iterable 🤓

```javascript
const ourOwnIterable = {
    [Symbol.iterator]() {
        return {
            next: () => { 
                return {
                    value: 'This works',
                    done: false
                }
            }
        }
    }
}
```

That's it, now we have our own iterable, just because  `Symbol.iterator` will return the object that have `next()` function, and that `next()` function will return the object that contains `value` and `done`, and that's obvious what do they do, let's say we use for-of loop to go throw our iteratable object, when ever javascript see the `done` is true, it will stop reading the objects and will close the loop.

But if we run this code right now, we will stuck into an infinite loop that will never end 🤢

To fix this and make our iterable object works fine, we need values, and the way to see if, we are done reading values ? first let's add some value to `ourOwnIterable` object 😏

```javascript
const ourOwnIterable = {
    value: [1, 2, 3, 4, 5],
    index: 0,
    [Symbol.iterator]() {
        return {
            /**
             * Our iterator will start here
             * @returns {{value: *, done: boolean}}
             */
            next: () => {
                return {
                    value: this.value[this.index],
                    done: false
                }
            }
        }
    }
}
```

Now we have our values ready to be access able, using for-of loop, but still we need to implement some logic to set `done`, to true when ever our iterator reach the last `value`

```javascript
const ourOwnIterable = {
    value: [1, 2, 3, 4, 5],
    index: 0,
    [Symbol.iterator]() {
        return {
            /**
             * Our iterator will start here
             * @returns {{value: *, done: boolean}}
             */
            next: () => {
                if(this.value.length === this.index) {
                    return {
                        value: null,
                        done: true
                    }
                }

                this.index++;

                return {
                    value: this.value[this.index - 1],
                    done: false
                }
            }
        }
    }
}
```

That's it ! Now, we have our own iterable object that we can iterate throw values 🥱😁

And now we can use for-of loop on `ourOwnIterable` object like so

```javascript
for (const el of ourOwnIterable) {
    console.log(el);
}
```

Thank you for your time 🤝
Hope you enjoy it ❤