JavaScript Design Patterns - Behavioral - Iterator

#javascript #programming #beginners

The iterator pattern allows us access to the elements in a collection without exposing its underlying representation.

In the example below, we will create a simple iterator with an array of elements. We can iterate through all the elements using the methods next() and hasNext().

class Iterator {
  constructor(el) {
    this.index = 0;
    this.elements = el;
  }

  next() {
    return this.elements[this.index++];
  }

  hasNext() {
    return this.index < this.elements.length;
  }
}

A complete example is here 👉 https://stackblitz.com/edit/vitejs-vite-2txuqu?file=iterator.js

🚀 Using this pattern when we want to access an object’s content collections without knowing how it is internally represented.

I hope you found it helpful. Thanks for reading. 🙏

Let's get connected! You can find me on:

Medium: https://medium.com/@nhannguyendevjs/
Dev: https://dev.to/nhannguyendevjs/
Hashnode: https://nhannguyen.hashnode.dev/
Linkedin: https://www.linkedin.com/in/nhannguyendevjs/
X (formerly Twitter): https://twitter.com/nhannguyendevjs/
Buy Me a Coffee: https://www.buymeacoffee.com/nhannguyendevjs

Top comments (11)

lionel-rowe • Jun 11 • Edited

There's no need to create a non-standard wrapper around an array — just use the built-in Symbol.iterator method:

const elements = [1, 2, 3, 4, 5]
const elementsIterator = elements[Symbol.iterator]()

toggleButton.addEventListener('click', () => {
    const next = elementsIterator.next()
    if (!next.done) {
        const element = next.value
        currentElement.innerText = `Current element: ${element}`
    }
})

Or even simpler (if arguably a bit hacky):

toggleButton.addEventListener('click', () => {
    for (const element of elementsIterator) {
        currentElement.innerText = `Current element: ${element}`
        break
    }
})

M. Akbar Nugroho • Jun 11

Thanks for sharing, Nhan! Btw, the illustration seems came from Refactoring Guru webaite and I think a simple credit should make the author feels appreciated 🙌

Nhan Nguyen • Jun 12

I bought a Dive Into Design Patterns book from Refactoring.Guru 😁

M. Akbar Nugroho • Jun 12

That's awesome! I love that book also. But, I don't know if we already bought, we are allowed to use those attributes. It reminds me when I put illustration from Refactoring UI then someone suggested me to put credit because it's licenced.

Anil Kumar • Jul 19

Thank you for sharing about this website. Found very usefull

Samuel Rouse • Jun 10 • Edited

Iterators can be an interesting topic, it can be much cleaner than creating and populating an array. It is especially helpful if you are creating an unlimited sequence or progression of numbers.

When developing an iterator, the next logical step is to look at built-in iteration protocols. Implementing these allows standard Iterable consumers like Array.from() and spread operators.

Samuel Rouse • Jun 10

Also, please be aware of copyright concerns when using content or illustrations from other sources.

Sergio G. Monda. • Jun 12

This is a non-standard approach, so custom that will not integrate well with the language capabilities. It could be useful for learning purposes but a better approach is to follow the iteration protocol. That is the standard way to hide your implementation behind something similar to your idea but compatible with for…of loops, for instance.