How do you create a generator function in JavaScript?

A generator function is a type of function in JavaScript that can be used to generate a sequence of values over time. Generator functions use the function* syntax and the yield keyword to return a sequence of values one at a time.

In this article, we will explore how to create a generator function in JavaScript and how to use it.

Creating a Generator Function

To create a generator function in JavaScript, we start by using the function* syntax. This syntax is used to create a generator function. Inside the generator function, we can use the yield keyword to return a sequence of values over time.

Let’s take a look at an example:

function* generatorFunction() {
  yield "value 1";
  yield "value 2";
  yield "value 3";
}

In this example, we have created a generator function called generatorFunction. Inside the function, we have used the yield keyword to return a sequence of values over time. When we call this function, it will return an iterator object that we can use to iterate over the sequence of values.

Using a Generator Function

To use a generator function in JavaScript, we first need to call the function. This will return an iterator object. We can then use the iterator object to iterate over the sequence of values returned by the generator function.

Let’s take a look at an example:

function* generatorFunction() {
  yield "value 1";
  yield "value 2";
  yield "value 3";
}

const iterator = generatorFunction();

console.log(iterator.next()); // { value: 'value 1', done: false }
console.log(iterator.next()); // { value: 'value 2', done: false }
console.log(iterator.next()); // { value: 'value 3', done: false }
console.log(iterator.next()); // { value: undefined, done: true }

In this example, we have called the generatorFunction function to create an iterator object. We can then use the iterator object to iterate over the sequence of values returned by the function. We use the next() method on the iterator object to get the next value in the sequence. Each time we call the next() method, the generator function will continue from where it left off and return the next value in the sequence.

The next() method returns an object with two properties: value and done. The value property contains the value returned by the yield keyword. The done property is a boolean that indicates whether the sequence of values has ended. When the sequence has ended, the value property will be undefined.

Passing Arguments to a Generator Function

We can also pass arguments to a generator function in JavaScript. To do this, we can simply pass the arguments as parameters to the function. Inside the function, we can use these arguments to control the sequence of values returned by the function.

Let’s take a look at an example:

function* generatorFunction(num) {
  for (let i = 1; i <= num; i++) {
    yield i;
  }
}

const iterator = generatorFunction(3);

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

In this example, we have created a generator function called generatorFunction that takes a single parameter num. Inside the function, we use a for loop to generate a sequence of values from 1 to num. We then use the yield keyword to return each value in the sequence one at a time. We can call the generatorFunction function and pass it an argument of 3. This will generate a sequence of values from 1 to 3. We can then use the iterator object to iterate over the sequence of values and print them to the console.

Returning a Value from a Generator Function

In addition to using the yield keyword to return a sequence of values, we can also use the return keyword to return a final value from a generator function. When we use the return keyword, the generator function will immediately exit and the iterator object will be marked as done.

Let’s take a look at an example:

function* generatorFunction(num) {
  for (let i = 1; i <= num; i++) {
    yield i;
  }
  return "done";
}

const iterator = generatorFunction(3);

console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: 'done', done: true }

In this example, we have added a return statement to the generatorFunction function. This will return the string 'done' when the for loop has finished iterating over the sequence of values. When we call the next() method on the iterator object for the fourth time, the generator function will immediately exit and return the final value of 'done'. The iterator object will be marked as done.

Thank you for reading, and let’s have conversation with each other

Thank you for reading my article. Let’s have conversation on Twitter and LinkedIn by connecting.