Why should you care?

Custom iterators let you loop over your own data structures cleanly.

See it live — copy this example

Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.

const range = {
  from: 1,
  to: 3,
  [Symbol.iterator]() {
    let current = this.from;
    const last = this.to;
    return {
      next() {
        if (current <= last) return { value: current++, done: false };
        return { done: true };
      }
    };
  }
};
for (const n of range) console.log(n);

Run Example »

Edit the code below and click Run to see the result in Toolliyo’s live editor.

What happened?

• Symbol.iterator returns an iterator.
• next() yields 1, 2, 3 then done: true.

Practice next

1. Run for...of on the custom range object.
2. Call next() manually three times then once more.
3. Compare with built-in string iterator.
4. Make range iterate backwards from to down to from.
5. Add a [Symbol.iterator] method to a simple linked-list structure.

Remember

next() returns { value, done } Symbol.iterator makes objects iterable for...of consumes iterators

ScriptVerse CSV export

A custom iterator yields spreadsheet rows lazily so million-row exports do not load all data into RAM.

Outcome: Iterators enable streaming UI and pagination without giant intermediate arrays.