How to Create Custom Iterators and Iterables in JavaScript ?

Iterators and Iterables are important concepts in the world of programming. They allow developers to traverse and manipulate collections of data in a more efficient and flexible way. JavaScript, being a high-level programming language, also supports iterators and iterables. In this article, we will take a closer look at what iterators and iterables are and how they work in JavaScript.

What are Iterators and Iterables?

An iterator is an object that provides a way to access a collection of data, one item at a time. It keeps track of the current position in the collection and provides methods for moving to the next item and retrieving the current item. In other words, an iterator is like a cursor that moves through the data and allows you to access each item in turn.

On the other hand, an iterable is an object that provides a way to iterate over its items using an iterator. It defines a method that returns an iterator for the collection of data. In simple terms, an iterable is any object that can be looped over using a for…of loop.

How to do Iterators and Iterables Work in JavaScript?

In JavaScript, an iterable is any object that has a Symbol.iterator property that returns an iterator. The Symbol.iterator is a built-in symbol that represents the default iterator for an object. The iterator itself is an object with a next() method that returns an object with two properties: value and done. The value property contains the next item in the collection, while the done property is a Boolean value that indicates whether the iterator has reached the end of the collection.

Example: Let’s take a look at an example to better understand how iterators and iterables work in JavaScript:

Javascript

let iterable = [1, 2, 3, 4, 5];
let iterator = iterable[Symbol.iterator]();

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 4, done: false }
console.log(iterator.next()); // { value: 5, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

Output

{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 4, done: false }
{ value: 5, done: false }
{ value: undefined, done: true }

In the above example, we created an array named iterable with five items. We then obtained an iterator for this array using the Symbol.iterator property and stored it in the variable iterator. We then called the next() method on the iterator five times to retrieve each item in turn. When we called next() for the sixth time, it returned an object with done: true, indicating that the iterator had reached the end of the collection. 

Creating Custom Iterators and Iterables: JavaScript also allows developers to create their own custom iterators and iterables. To do this, you need to define an object with a Symbol.iterator property that returns an iterator object. The iterator object should have a next() method that returns an object with the next item in the collection.

Here’s the syntax for creating iterators:

const iterator = {
      next: function() {
        // Return the next value in the sequence or
        // { done: true } if the sequence is complete
      }
};

The next() method returns an object with two properties: value, which is the next value in the sequence, and done, which is a boolean that indicates whether the sequence is complete.

Example: Here’s an example of creating a custom iterator for an array:

Javascript

const myArray = [1, 2, 3];

const myIterator = {
    currentIndex: 0,
    next: function () {
        if (this.currentIndex < myArray.length) {
            return {
            value: myArray[this.currentIndex++],
            done: false
        };
        } else {
            return { done: true };
        }
    }
};

console.log(myIterator.next()); // { value: 1, done: false }
console.log(myIterator.next()); // { value: 2, done: false }
console.log(myIterator.next()); // { value: 3, done: false }
console.log(myIterator.next()); // { done: true }

Output

{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ done: true }

In this example, myArray is an array with three elements. myIterator is an object with a next() method that returns an object with a value property and a done property. The currentIndex property keeps track of the current index in the array.

When the next() method is called, it first checks whether the currentIndex is less than the length of the array. If it is, it returns an object with the value at the current index and sets the done property to false. If the currentIndex is equal to or greater than the length of the array, it returns an object with the done property set to true.

Syntax for Creating an Iterable:

const iterable = {
      [Symbol.iterator]: function() {
    // Return an iterator object
      }
};

The [Symbol.iterator] method returns an iterator object that can be used to iterate over the values in the iterable. 

Example: Here’s an example of using a custom iterable:

Javascript

let myIterable = {
    items: [1, 2, 3, 4, 5],
    [Symbol.iterator]() {
        let index = 0;
        return {
            next: () => {
                if (index < this.items.length) {
                    return {
                        value: this.items[index++],
                        done: false
                    };
                } else {
                    return { value: undefined, done: true };
                }
            }
        };
    }
};

for (let item of myIterable) {
    console.log(item);
}

Output

1
2
3
4
5

In the above example, we defined an object named myIterable that has an array of items and a Symbol.iterator property that returns an iterator object. The iterator object has a next() method that returns the next item in the items array until it reaches the end of the array. We can then use a for…of loop to iterate over the items in myIterable.

Conclusion: Iterators and iterables are powerful tools in JavaScript that allow developers to work with collections of data in a flexible and efficient way. JavaScript has built-in support for iterators and iterables, and also allows developers to create their own custom implementations. Understanding these concepts is essential for writing more advanced and effective code in JavaScript.