Iterators in JavaScript

Introduction

An iterator is an object with a next() method that returns { value, done }. Built-in types—arrays, strings, Map, Set—provide iterators so for...of works. Custom iterators let you expose lazy sequences and hide internal structure.

Prerequisites

Iterable and Iterator Protocol

  • Iterable — has Symbol.iterator method returning an iterator
  • Iterator — has next() returning { value, done: boolean }
javascript
// Manual iterator on array
const arr = ["a", "b", "c"];
const it = arr[Symbol.iterator]();
 
console.log(it.next());
console.log(it.next());
console.log(it.next());
console.log(it.next());

for...of Uses Iterators

javascript
// String yields characters
for (const ch of "hi") {
  console.log(ch);
}
 
// Map yields [key, value] pairs
const map = new Map([["x", 1], ["y", 2]]);
for (const [key, value] of map) {
  console.log(key, value);
}

Custom Iterable Object

Iterator Helpers (Modern)

Some environments support Iterator.from, .map, .filter on iterators—check target runtime. Arrays still favor .map for simplicity.

Spread and Destructuring Use Iterators

javascript
// Spread consumes iterable
const set = new Set([1, 2, 3]);
const arr = [...set];
console.log(arr);

Mini Example: Linked List Walk

FAQ

for...in vs for...of?

for...in enumerates keys on objects; for...of iterates values of iterables.

Can I iterate plain objects with for...of?

Not by default—use Object.keys or make the object iterable.

Iterator exhaustion?

After done: true, further next() calls keep returning { done: true }.

What comes next?

Generators.