Js ES6   Iterables and Iterators - 2019



The iterable is a interface that specifies that an object can be accessible if it implements a method who is key is [symbol.iterator].

Some of the built in data structure that use iterable are :

  • Arrays

  • Strings

  • Maps

  • Sets etc.

Why iterable were added in ES6?

Without iterable, it is difficult to manage the iteration on data for various type of data structures i.e iterating on array is different from iterating on an object.

Also, ES6 has introduced new data structure like sets and maps so it will become more complicated to write logic as per data structure for iterations.

This is where iterable interface was born.

There are two things to notice here

  1. Data consumer — how the iteration take place like using loops, spread operator, array.from method, destructuring via an array pattern etc

  2. Data source — what data structure we choose like array, maps, string etc to iterate on.


Object that knows how to access items from a collection one at a time, while keeping track of its current position within that sequence.

Object that is return by the iterable interface is also iterator object.

Iterator object have a next() method which returns the next item in the sequence. This method returns an object with two properties: done and value and when next() calls reaches to the end of sequence then the doneproperty set to true else remain false .

So the next on an iterator return :

{value: ‘Current value of iteration’, done: ‘true/false’}

Now, since we are clear with the theory, lets see some examples

Simple array example

Here, we have an array arr with some values and then we created a iterator object on which we can call the next() until we have done as true

Note: Array already have symbol.iterator key as a function in them and in above example Symbol.iterator represents the property of iter object which when we call, construct an iterator instance for consuming that object’s values through next.

We can create our own iterables and iterator object lets see an example.

Custom iterators object example

const customIterable = {
    [Symbol.iterator]() {
        let counter = 0;
        return {
            next() {
                if (counter < 5) {
                return { done: false, value: counter };
                } else {
                return { done: true, value: undefined };

Note: To run above we will use for..of loop, you can read here for more details.

This is how we iterate over our customIterable object.

for (const x of customIterable) {    console.log(x);}// output 1,2,3,4,5,undefined

The code executes five steps, with the counter incrementing every run . First, we return the value 1, then the value 2 and so on till 5then we indicate that the end of the iteration has been reached and value undefined is returned. Each item is wrapped in an object with the properties:

  • value which holds the actual item and

  • done which is a boolean flag that indicates whether the end has been reached, yet.

Note: The last step can return a value if required, also we can manual break for..of loop if required using break keyword. The break keyword will send a signal to an iterator that the consuming code is complete and will not be pulling any more values from it, so it is being called anyway once we finished iterating, it is the one returning {done:true}, but we can call it manually as well.

Iterator with generator hold a lot of power and may change how we write code.

If anything is not clear or you want to point out something, please comment down below.

You may also like my other articles

Javascript - Generator-Yield/Next & Async-Await - 2019

This keyword In Javascript 2019 - Javascript Context

Javascript- Currying VS Partial Application 2019

Javascript Performance Test 2019 [Part-1] - for vs for each vs (map, reduce, filter, find)

Structure Node.js App - Fractal Pattern - 2019


About Deepak Gupta

Deepak is profound programmer and financial educator in India. He has co-founded couple of startup from scratch and worked in more than 12 startup and big corporate with different roles.

Owing to his interest, he has been writing blogs regarding JavaScript and other framework to help people starting with it. Also, love to educate people about trading and cryptoworld in his free time.