Suggest an edit

Improve this article

Refine the answer for “Generators and iterators”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts736 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.