Generators and iterators

JavaScriptMiddle~2 min read

1. What are iterators (in short)

An iterator is an object that lets you iterate over values one at a time.

It must implement a method next() that returns an object of the shape:

javascript

{
  value: <value>,
  done: <boolean>
}

Example of a simple manual iterator:

javascript

const iterator = {
  current: 0,
  next() {
    if (this.current < 3) {
      return { value: this.current++, done: false };
    } else {
      return { value: undefined, done: true };
    }
  }
};

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

An iterator is an object that knows how to yield values one by one.

2. What is a generator

A generator (function*) is a convenient way to create an iterator without implementing next() by hand.

When you call a function*, it returns a generator object that already implements the iterator protocol.

3. A generator is an iterator

javascript

function* gen() {
  yield 10;
  yield 20;
  yield 30;
}

const iterator = gen();

console.log(iterator.next()); // { value: 10, done: false }
console.log(iterator.next()); // { value: 20, done: false }
console.log(iterator.next()); // { value: 30, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

iterator is a generator object;
it has a next() method that returns { value, done };
so it fully conforms to the iterator protocol.

4. A generator is also an iterable

A generator implements not only the iterator protocol, but also the iterable protocol, because it has a Symbol.iterator method:

javascript

function* gen() {
  yield 1;
  yield 2;
  yield 3;
}

const it = gen();

console.log(typeof it[Symbol.iterator]); // "function"
console.log(it[Symbol.iterator]() === it); // true

This means a generator:

can be used in for...of;
can be spread (...);
can be passed to Array.from(), Promise.all(), etc.

5. Example of using a generator as an iterator

javascript

function* numbers() {
  yield 1;
  yield 2;
  yield 3;
}

for (const n of numbers()) {
  console.log(n);
}

Output:

javascript

1
2
3

for...of automatically calls next() on the generator while done: false.

6. The relationship between iterators and generators

Property	Iterator	Generator
What it is	An object with a `next()` method	A function that returns an iterator
Returns	`{ value, done }`	`{ value, done }`
Created manually	yes	no, automatic
Manages state manually	yes	no, automatic inside `function*`
Usable in `for...of`	Only if it implements `[Symbol.iterator]`	yes (implemented by default)

In other words: generators are syntactic sugar over creating iterators.

7. "Manual iterator" vs "generator"

Without a generator:

javascript

function makeIterator(array) {
  let i = 0;
  return {
    next() {
      return i < array.length
        ? { value: array[i++], done: false }
        : { value: undefined, done: true };
    }
  };
}

const it = makeIterator(['a', 'b', 'c']);
console.log(it.next()); // { value: 'a', done: false }

With a generator:

javascript

function* makeIterator(array) {
  for (const item of array) yield item;
}

const it = makeIterator(['a', 'b', 'c']);
console.log(it.next()); // { value: 'a', done: false }

Generators remove all the manual state-tracking logic while preserving the same behavior.

8. Generators allow creating "infinite iterators"

javascript

function* infiniteCounter() {
  let i = 1;
  while (true) yield i++;
}

const it = infiniteCounter();

console.log(it.next().value); // 1
console.log(it.next().value); // 2
console.log(it.next().value); // 3

This is impossible with a regular array, but iterators (and generators) support "lazy" infinity.

SUMMARY

Concept	Iterator	Generator
What it is	An object with a `next()` method	A function that returns an iterator
State management	Manual	Automatic
Protocol	Iterator	Iterator + Iterable
`Symbol.iterator` method	Usually needs to be added manually	Present by default
Usable in `for...of`	Only if `[Symbol.iterator]` is implemented	always
Evaluation	Lazy	Lazy
Convenience	Low	High

In one sentence:

A generator is a convenient way to create an iterator without manually implementing next(), done, and the internal state.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.