What are JavaScript generators and how do they work?

Sandra Emily 428 18 Jun 2024

Sandra Emily

Student

Content writing is the process of writing, editing, and publishing content in a digital format. That content can include blog posts, video or podcast scripts, ebooks or whitepapers, press releases, product category descriptions, landing page or social media copy and more.

1 Answers

Ravi Vishwakarma 19 Jun 2024

JavaScript generators 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:

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:

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:

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:

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.

forum

What are JavaScript generators and how do they work?

Can you answer this question?

1 Answers