Skip to content

Exploring the Power of Generator Functions in JavaScript

Posted on:November 1, 2023 at 12:00 AM (3 min read)


JavaScript has evolved significantly over the years, enabling more efficient, streamlined coding through ES6+ features. One such feature that has dramatically transformed the way we handle asynchronous data is the generator function.

What are generator functions?

Generator functions are a special type of function in JavaScript that allows the execution to pause and resume later. Unlike traditional functions that run to completion in a single execution, generators yield one value at a time, making them ideal for scenarios where data is large or expensive to compute.

The syntax for a generator function involves the function* keyword:

function* generatorFunction() {
  // function body

The asterisk after the function keyword might seem unusual, but it denotes that this function is a generator.

Yielding values

The yield keyword, exclusive to generator functions, is used to pause and resume execution. Each time a value is yielded, the function’s context (variable bindings) is saved and can be resumed later on.

function* generatorFunction() {
  yield "first";
  yield "second";
  yield "third";
const generator = generatorFunction();
console.log(; // { value: 'first', done: false }
console.log(; // { value: 'second', done: false }
console.log(; // { value: 'third', done: false }
console.log(; // { value: undefined, done: true }

In this example, each call to resumes the function and returns the next value until there are no more yield statements, at which point done: true is returned.

Generators and asynchronous operations

One of the most compelling use cases for generators is handling asynchronous operations. Traditionally, you would use callbacks, promises, or async/await syntax to handle asynchronous operations in JavaScript. However, these methods can sometimes lead to complex and hard-to-maintain code.

function* generatorFunction() {
  const data = yield fetchData(); // fetch data is a function returning a promise
const generator = generatorFunction();
const promise =;
promise.then(data =>;

In this example, we first call, which starts the generator function and pauses at the yield statement, where fetchData() is called. The fetchData() function returns a promise, which we then resolve using promise.then(). The resolved data is then passed back to the generator using


JavaScript’s generator functions offer a powerful, efficient way to handle asynchronous operations and large data sets. They provide the ability to pause and resume execution of function bodies, making code more readable and maintainable. Like any tool, they shine the brightest when used in the right context. So, the next time you find yourself dealing with complex asynchronous code or large data streams, give generator functions a shot!