---
title: "What are JavaScript generators and how do they work?"  
description: "What are JavaScript generators and how do they work?"  
author: "Sandra Emily"  
published: 2024-06-18  
updated: 2024-06-19  
canonical: https://www.mindstick.com/forum/160758/what-are-javascript-generators-and-how-do-they-work  
category: "javascript"  
tags: ["web development", "javascript", "front-end development"]  
reading_time: 2 minutes  

---

# What are JavaScript generators and how do they work?

What are JavaScript generators and how do they work?

## Replies

### Reply by Ravi Vishwakarma

[JavaScript generators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator) are a special type of function that can pause and resume their execution. They provide a way to handle asynchronous operations, manage state, and work with iterators more effectively.

Here’s an in-depth look at what generators are, how they work, and how to use them.

## 1. Defining Generators

Generators are defined using the `function*` syntax and can yield multiple values over time. Here’s an example:

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

## 2. Invoking Generators

When you invoke a generator function, it doesn't execute immediately. Instead, it returns an iterator, which you can use to control the generator's execution:

```javascript
const generator = generatorFunction();
console.log(generator.next()); // { value: 1, done: false }
console.log(generator.next()); // { value: 2, done: false }
console.log(generator.next()); // { value: 3, done: false }
console.log(generator.next()); // { value: undefined, done: true }
```

**3. The** `yield` **Keyword**

The `yield` the keyword is used to pause the execution of the generator function and return a value. The generator can be resumed later from where it left off:

```javascript
function* countUpTo(n) {
  for (let i = 1; i <= n; i++) {
    yield i;
  }
}

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

## 4. Using Generators for Iteration

Generators are useful for creating custom iterators. Here’s an example of an iterator that generates an infinite sequence of numbers:

```javascript
function* infiniteSequence() {
  let i = 0;
  while (true) { // infinite loop test
    yield i++; // increase value of 'i' and return them
  }
}

const sequence = infiniteSequence();
console.log(sequence.next().value); // 0
console.log(sequence.next().value); // 1
console.log(sequence.next().value); // 2
// and so on...

for(item of sequence){
    //console.log(item); // for infinite interation
}
```

## Note

- **Generators** are functions that can pause and resume execution.
- `function*`: Define a generator.
- `yield`: Pause the generator and return a value.
- `.next()`: Resume the generator from where it left off.
- **Custom Iterators**: Use generators to create custom iterators.
- **Control Flow**: Pass values and handle errors within generators.
- **Async Operations**: Combine generators with Promises to manage asynchronous code.


---

Original Source: https://www.mindstick.com/forum/160758/what-are-javascript-generators-and-how-do-they-work

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.