XQA
Back to JavaScript
2026-02-258 min read

JS Generators (JavaScript)

Learn JS Generators (JavaScript) step by step with clear examples and exercises.

Why This Matters

JavaScript Generators are a powerful tool that offers several benefits:

  1. Memory Efficiency: By generating values on demand, you can avoid storing all data in memory at once, which is particularly useful when dealing with large datasets.
  2. Resource Conservation: Generators help prevent your system from becoming overwhelmed during resource-intensive tasks by only executing the necessary code to produce each value.
  3. Flexibility: You can pause and resume generator functions at any point, making them ideal for asynchronous tasks or long-running computations that might otherwise block the event loop.
  4. Iterable Interface: Generators conform to the iterable interface, allowing you to use them with various built-in functions like Array.from(), forEach(), and map().
  5. Concurrency Control: Generators can help manage concurrent tasks more efficiently by yielding control back to the event loop during long-running operations.
  6. Error Handling: Generators allow you to handle errors explicitly using try-catch blocks or the finally keyword, which is not possible with traditional functions that throw exceptions and are immediately terminated.

Prerequisites

Before diving into JavaScript Generators, it's essential to have a good understanding of the following concepts:

  1. JavaScript ES6: Familiarize yourself with ECMAScript 6 features such as arrow functions, let and const, template literals, and destructuring assignments.
  2. Async/Await: Understand how to handle asynchronous tasks using JavaScript's async/await syntax.
  3. Closures: Be comfortable working with closures in JavaScript, as they play a crucial role in understanding generator functions.
  4. Iterables and Iterators: Gain an understanding of iterables and iterators in JavaScript, as generators are built upon this concept.
  5. Event Loop: Understanding the event loop is important for grasping how generators can help manage concurrent tasks more efficiently.

Core Concept

Defining Generator Functions

A generator function is defined using the function* keyword instead of the traditional function keyword. Here's an example:

function* myGenerator() {
yield 'Hello';
yield 'World';
}

In this example, we have a simple generator function called myGenerator. The yield keyword is used to produce values from the generator. When you call the generator function with the next() method, it will return an object containing a value property for the yielded value and a done property indicating whether all yields have been processed (true) or if there are more values to be produced (false).

Iterating Through Generators

To iterate through a generator function, you can use the for...of loop. Here's an example:

const myGenerator = function* () {
yield 'Hello';
yield 'World';
}();

for (let value of myGenerator) {
console.log(value);
}
// Output: Hello
// World

In this example, we create a new instance of the generator function and iterate through it using the for...of loop. Each time the loop encounters a yielded value, it logs it to the console.

Generator Functions and Asynchronous Tasks

Generator functions can be particularly useful when handling asynchronous tasks. Here's an example using the fetch() API:

function* myAsyncGenerator() {
const response = yield fetch('https://api.example.com/data');
const data = yield response.json();
console.log(data);
}

const generator = myAsyncGenerator();
generator.next().value.then((resolve) => {
generator.next(resolve);
}).then(() => {
generator.next().value.then((resolve) => {
generator.next(resolve);
});
});

In this example, we define a generator function that fetches data from an API and logs it to the console. We use the yield keyword to pause the generator function until the promises returned by fetch() and json() are resolved. The next().value method returns a promise that resolves with the next yielded value, allowing us to chain asynchronous operations using then().

Generator Functions and Concurrency Control

Generator functions can help manage concurrent tasks more efficiently by yielding control back to the event loop during long-running operations. Here's an example:

function* myConcurrentTask(task1, task2) {
const result1 = yield task1();
const result2 = yield task2();

console.log(`Result 1: ${result1}`);
console.log(`Result 2: ${result2}`);
}

function longRunningTask(callback) {
setTimeout(() => {
callback('Long running task result');
}, 3000);
}

const concurrentTask = myConcurrentTask(
() => new Promise((resolve) => resolve('Task 1 result')),
() => longRunningTask((result) => resolve(result))
);

concurrentTask.next().value.then((resolve) => {
concurrentTask.next(resolve);
}).then(() => {
concurrentTask.next().value.then((resolve) => {
concurrentTask.next(resolve);
});
});

In this example, we define a generator function called myConcurrentTask that runs two tasks concurrently: one synchronous and one long-running using setTimeout. By yielding control back to the event loop during the long-running task, we ensure that the synchronous task does not block other operations.

Worked Example

Let's create a generator function that generates prime numbers up to a specified limit:

function* primeNumbers(limit) {
const isPrime = (num) => {
if (num < 2) return false;

for (let i = 2; i <= Math.sqrt(num); i++) {
if (num % i === 0) return false;
}

return true;
};

let currentNum = 2;
while (true) {
if (isPrime(currentNum)) {
yield currentNum;
}

currentNum++;

if (currentNum > limit) {
break;
}
}
}

In this example, we define a generator function called primeNumbers. It uses an inner helper function isPrime() to check whether a number is prime and a loop to generate prime numbers up to the specified limit. The loop continues until it encounters a prime number or exceeds the limit.

To use this generator function, you can create an instance of it and iterate through it using the for...of loop:

const primeGen = primeNumbers(100);

for (let num of primeGen) {
console.log(num);
}
// Output: 2 3 5 7 11 13 17 19 23 29 31 37 41 43 47 53 59 61 67 71 73 79 83 89 97

In this example, we create a new instance of the primeNumbers generator function with a limit of 100 and iterate through it using the for...of loop. The generator yields each prime number up to 100, which are logged to the console.

Common Mistakes

  1. Not using the function* keyword: Remember to use the function* keyword instead of the traditional function keyword when defining generator functions.
  2. Forgetting to yield values: Generator functions must yield at least one value for them to be useful. If you forget to yield any values, your generator function will not produce any output.
  3. Using next() incorrectly: The next() method is used to advance the generator's position and return the next yielded value. However, it can also accept an argument, which is used as the value to be yielded when there's no explicit yield statement. Forgetting to pass a value to next() when one is expected can lead to errors.
  4. Not handling generator errors: Generator functions can throw exceptions just like regular functions. If not handled properly, these exceptions will be caught by the next awaitable operation in the chain. To handle errors explicitly, you can use try-catch blocks or the finally keyword.
  5. Misusing generators for simple tasks: Generators are powerful tools, but they may not always be the best choice for simple tasks that don't require resource conservation or asynchronous processing. Be mindful of when to use generators and when other solutions might be more appropriate.
  6. Overcomplicating generator functions: Remember that generator functions should be used to simplify complex tasks, not complicate them. Keep your generator functions clean and easy to understand.
  7. Ignoring concurrency control: Generator functions can help manage concurrent tasks more efficiently by yielding control back to the event loop during long-running operations. Be sure to take advantage of this feature when working with concurrent tasks.

Practice Questions

  1. Write a generator function that generates Fibonacci numbers up to a specified limit without using an explicit loop.
  2. Modify the prime number generator function to also yield the golden ratio (approximately 1.61803) at each iteration.
  3. Create a generator function that generates the first n Fibonacci numbers, including their indices, as an array.
  4. Write a generator function that yields the factors of a given number.
  5. Implement a simple version of the Sieve of Eratosthenes using a generator to yield all prime numbers up to a specified limit.
  6. Create a generator function that generates the first n prime numbers, including their indices, as an array.
  7. Write a generator function that yields the sum of the first n Fibonacci numbers.
  8. Modify the prime number generator function to also yield the smallest prime factor for each non-prime number it encounters.
  9. Implement a generator function that generates all permutations of an array using recursion and yielding each permutation as it is found.
  10. Write a generator function that yields the first n perfect numbers (numbers whose proper divisors sum up to the same value).

FAQ

  1. Why use generators instead of arrays for large data sets? Generators only produce values on demand, which can help conserve memory when dealing with very large datasets that wouldn't fit in memory all at once.
  2. Can I pause and resume generator functions? Yes! You can pause a generator function by calling the next() method without an argument, and then resume it later by calling next() again, providing any necessary arguments to yield values.
  3. How do I handle errors in generator functions? Just like regular functions, generator functions can throw exceptions. To handle errors explicitly, you can use try-catch blocks or the finally keyword.
  4. Can I use generators with async/await? Yes! Generator functions can be particularly useful when handling asynchronous tasks because they allow you to pause and resume the function's execution at specific points, making it easier to manage complex asynchronous operations.
  5. What happens if a generator runs out of yielded values? If a generator runs out of yielded values and there are no more values to produce (i.e., the done property is true), calling the next() method will return an object with an empty value property and a done property set to true.
  6. Can I use generators for streaming data? Yes! Generators are often used in conjunction with streams, such as those provided by Node.js's stream module, to process data efficiently and manage resources more effectively.
  7. How do I convert a generator function to an iterator? To convert a generator function to an iterator, you can use the Symbol.iterator method or the Iterator interface. Here's an example:
function* myGenerator() {
yield 'Hello';
yield 'World';
}

const myIterator = myGenerator();

myIterator[Symbol.iterator] = function* () {
yield* myGenerator;
};

for (let value of myIterator) {
console.log(value);
}
// Output: Hello
// World

In this example, we convert the myGenerator generator function to an iterator by defining a new Symbol.iterator method that yields all values produced by the original generator function using the yield* operator. This allows us to iterate through the iterator just like any other iterable object.

JS Generators (JavaScript) | JavaScript | XQA Learn