Language: EN

que-son-las-funciones-generadoras-en-javascript

What are generator functions in JavaScript

In JavaScript, a generator function is a special type of function that can pause its execution and then resume it at a later time.

Generator functions are useful when we need to work with a large amount of data or with large sequences, as they only compute values as we request them (instead of calculating all values at once).

Basic Syntax of Generator Functions

  1. Generator functions are defined using the function* syntax (the asterisk indicates that the function is a generator).

  2. On the other hand, inside the function we will use the yield keyword (which pauses execution and returns a value)

How yield Works

  • Every time it encounters a yield, the function returns the result and suspends at that point.
  • When next() is called again, the generator function continues executing right after the yield that suspended it.
  • It will execute until it finds another yield or finishes execution.

The result returned by yield is an object with the properties value (the generated value) and done (a boolean indicating whether the sequence has ended).

Basic Example

Let’s see it with an example. First, we will define a very simple generator function that returns a sequence 1, 2, and 3.

function* exampleGenerator() {
  yield 1; // Pause here and return 1
  yield 2; // Pause here and return 2
  yield 3; // Pause here and return 3
}

In this example,

  • The function exampleGenerator generates three sequential values: 1, 2, and 3.
  • Each yield will return a value.
  • Execution will remain suspended until it is called again.

Now let’s see how we can use our generator function. To do this, we simply need to invoke its next() method to request the next value.

const generator = exampleGenerator();

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 }

In this example,

  • The next() function is called repeatedly to get the next value.
  • The obtained result contains value and done.

Generator Functions and Iterators

The relationship between generator functions and iterators is very close (in fact, they are designed to work together).

An iterator is an object that must have a next() method, which returns an object with the properties value and done.

As we have seen, this is exactly the behavior of generator functions when we use yield.

That is, any generator function is also an iterator. In fact, we can use them in a for...of loop.

function* colors() {
  yield 'red';
  yield 'green';
  yield 'blue';
}

for (const color of colors()) {
  console.log(color); // 'red', 'green', 'blue'
}

In this example,

  • The for...of loop automatically calls next() on the generator and handles the return value of each iteration.
  • When the generator function finishes producing values, the for...of loop automatically ends.

Practical Examples