Suggest an edit

Improve this article

Refine the answer for “Generators”. 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)

A **generator function** is a special type of function in JavaScript
that **can pause its execution and then continue it from the same place**.

This is a very powerful tool - it lets you write **iterators**, **lazy computations**, **asynchronous loops** and much more.
Let's break it down step by step.

---

## 1. Definition

> A **generator function** is a function that returns a **generator object** (an iterator),
> and inside itself uses the `yield` keyword to **pause execution** and **return values one at a time**.

---

## 2. Syntax

```javascript
function* name([args]) {
  // function body
}
```

- the `*` after `function` makes the function a **generator**;
- `yield` is used to produce values "step by step";
- when called, it **does not run immediately**, it returns a **generator** (an iterator).

---

## 3. Example - a basic generator

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

const iterator = gen();

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

What happens:

- on the first call to `next()`, execution reaches the first `yield`, returns 1 and "freezes";
- on the next `next()`, execution continues **from the same place**;
- after the last `yield`, the generator finishes (`done: true`).

---

## 4. Generators are iterators

A generator returns an **object compatible with the iterator protocol**.
So it can be used in `for...of`:

```javascript
function* numbers() {
  yield 10;
  yield 20;
  yield 30;
}

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

Output:

```javascript
10
20
30
```

---

## 5. Example - an infinite generator

Generators can be **infinite** - they don't build the whole array at once, they yield values "on demand".

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

const counter = infiniteCounter();

console.log(counter.next().value); // 1
console.log(counter.next().value); // 2
console.log(counter.next().value); // 3
// ...and so on infinitely
```

This is an example of **lazy computation** - values are generated as needed.

---

## 6. Passing values into a generator

You can **pass data back** into a generator via `next(value)`.

```javascript
function* dialog() {
  const name = yield 'What is your name?';
  yield `Hello, ${name}!`;
}

const it = dialog();

console.log(it.next().value);       // "What is your name?"
console.log(it.next('Tim').value);  // "Hello, Tim!"
```

The first `next()` starts the generator,
the second passes `'Tim'` in as the result of the `yield` expression.

---

## 7. Using `return`

You can end a generator early using `return`:

```javascript
function* example() {
  yield 1;
  return 'end';
  yield 2; // will not run
}

const it = example();

console.log(it.next()); // { value: 1, done: false }
console.log(it.next()); // { value: 'end', done: true }
```

---

## 8. Asynchronous generators (ES2018)

Asynchronous generators let you work with `await` inside iterable data streams.

```javascript
async function* fetchData() {
  yield await Promise.resolve('First part');
  yield await Promise.resolve('Second part');
}

for await (const part of fetchData()) {
  console.log(part);
}
```

Asynchronous generators use `for await...of` for asynchronous iteration.

---

## 9. Why generators are needed

| Use case | Example |
|---|---|
| **Building iterators** | Element-by-element data generation |
| **Lazy computation** | No need to store the whole array |
| **Step-by-step execution** | Controlling the execution flow |
| **Asynchronous pipelines** | Processing data streams without loading everything into memory |
| **Coroutine emulation** | The ability to "stop" and "resume" code |

---

## 10. Example - a range generator

```javascript
function* range(start, end, step = 1) {
  for (let i = start; i <= end; i += step) {
    yield i;
  }
}

for (const num of range(1, 5)) {
  console.log(num);
}
```

Output:

```javascript
1
2
3
4
5
```

---

## SUMMARY

| Property | Description |
|---|---|
| Definition | A function declared with `function*` that returns an iterator |
| Returns | A generator object |
| Keyword | `yield` |
| Can pause execution | Yes |
| Can pass values back | Yes |
| Asynchronous version | `async function*` |
| Main use | Lazy computation, iterators, asynchronous streams |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.