Iterator Pattern

1. Introduction

The Iterator Pattern is a design pattern that provides a way to access the elements of a collection sequentially without exposing its underlying structure. In JavaScript, this is standardized via the Iterable Protocol and Generators.

2. Why It Matters

Different data structures (like arrays, maps, sets, or binary trees) store elements in different ways. The Iterator pattern provides a standardized way to traverse these collections (like using for...of loops or the spread operator) regardless of how the elements are stored.

3. Real-World Analogy

Think of a Supermarket Checkout Scanner:

• Direct Access (Rummaging): A clerk empties a shopper's cart onto the counter, opening boxes to check items. This requires knowing how every item is packaged.
• Iterator (Standard conveyor belt): The shopper places items on a conveyor belt one by one. The cashier slides each item past a laser scanner. Symmetrically, the scanner only reads the barcode (calls next()) to get the item and check if more items remain (checks done), without needing to know what is inside the boxes.

4. The Iterable Protocol

For an object to be iterable in JavaScript, it must implement the Symbol.iterator method. This method returns an iterator object containing a next() method, which returns an object with value and done properties:

5. Generators (Simpler Iterators)

Writing custom iterator objects with state counters can be tedious. Generator Functions (function*) simplify this by automatically conforming to the iterable protocol using the yield keyword:

6. Practical Example

This script demonstrates implementing a custom collection class that implements the iterable protocol:

7. Common Mistakes

• Trying to loop over non-iterable objects using for...of: Regular JavaScript objects (e.g. {}) are not iterable by default. Attempting to loop over them using a for...of loop throws a TypeError. Use Object.keys() or implement the Symbol.iterator method to make them iterable.

8. Quick Quiz

9. Scenario-Based Challenge

10. Debugging Exercise

const myCollection = {
  items: [10, 20],
  // Bug: named the iterator method Symbol.iterator string key?
  "Symbol.iterator"() {
    let index = 0;
    return {
      next: () => ({ value: this.items[index++], done: index > this.items.length })
    };
  }
};
for (const x of myCollection) { // TypeError: myCollection is not iterable! Why?
  console.log(x);
}

const myCollection = {
  items: [10, 20],
  [Symbol.iterator]() { // Computed symbol property key
    let index = 0;
    return {
      next: () => {
        return index < this.items.length
          ? { value: this.items[index++], done: false }
          : { done: true };
      }
    };
  }
};

11. Interview Questions

12. Production Considerations

• • Generators over Iterators: Prefer using generator functions (function*) to implement custom iterators. Generators manage state counters and iteration flags automatically under the hood, reducing boilerplate and preventing common bugs.