Have you ever wondered how JavaScript’s for...of loop works with arrays, strings, maps, and sets, but not with regular objects? The secret lies in the iterator protocol introduced in ES6. In this guide, we’ll explore how iterators work and how you can make even plain object literals iterable.

What are Iterators and Iterables?

In JavaScript, an iterable is an object that implements the @@iterator method (accessible via Symbol.iterator). This method returns an iterator object that knows how to access elements from the collection one at a time.

Built-in iterables include Arrays, Strings, Maps, Sets, and NodeList objects. This is why you can use for...of loops with them:

const arr = [4, 5, 6, 7];
for (const i of arr) {
    console.log(i); // Output: 4, 5, 6, 7
}

But regular objects are not iterable by default:

const obj = { start: 10, end: 15 };
for (const i of obj) { // TypeError: obj is not iterable
    console.log(i);
}

Understanding the Iterator Protocol

To make an object iterable, it must implement the Symbol.iterator method. This method must return an object with a next() method, which in turn returns an object with two properties:

• value: The current value in the iteration
• done: A boolean indicating whether the iteration is complete

Let’s examine how arrays implement this protocol:

const arr = [4, 5, 6, 7];
const it = arr[Symbol.iterator]();

console.log(it.next()); // { value: 4, done: false }
console.log(it.next()); // { value: 5, done: false }
console.log(it.next()); // { value: 6, done: false }
console.log(it.next()); // { value: 7, done: false }
console.log(it.next()); // { value: undefined, done: true }

Making Objects Iterable

Now let’s make a regular object iterable. Suppose we have an object with start and end properties, and we want to iterate from start to end:

const obj = {
    start: 10,
    end: 15,
    
    [Symbol.iterator]() {
        let current = this.start;
        const end = this.end;
        
        return {
            next() {
                if (current <= end) {
                    return { value: current++, done: false };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

for (const num of obj) {
    console.log(num); // Output: 10, 11, 12, 13, 14, 15
}

Alternative Implementation

You can also implement the iterator by having the object return itself as the iterator and defining the next() method directly on the object:

const obj = {
    start: 10,
    end: 15,
    
    [Symbol.iterator]() {
        this.current = this.start;
        return this;
    },
    
    next() {
        if (this.current <= this.end) {
            return { value: this.current++, done: false };
        } else {
            return { done: true };
        }
    }
};

for (const num of obj) {
    console.log(num); // Output: 10, 11, 12, 13, 14, 15
}