What Does function* Mean in JavaScript?

A JavaScript function with an asterisk (i.e. function*) is used to declare a generator function — which is a function that can be paused in the middle of its execution and be resumed later.

In a JavaScript generator function:

  • The yield keyword is used to pause the function execution and return a value, and;
  • The Generator.prototype.next() method is used to resume the function execution, which executes the function until the next yield or till the end of the function.

For example, consider the following generator function that produces a sequence of numbers:

function* finite() {
  for (let i = 0; i <= 2; i++) {
    yield i;
  }
}

const seq = finite();

console.log(seq); // Generator

console.log(seq.next().value); // 0
console.log(seq.next().value); // 1
console.log(seq.next().value); // 2
console.log(seq.next().value); // undefined

As you can see in the example above, when a generator function is called, it:

  • Returns a Generator object, and;
  • Does not execute the function body immediately — i.e. until the generator is iterated over using the Generator.prototype.next() method.

This way of lazy-evaluating a function body makes generators more memory-efficient than other ways of implementing iterators in JavaScript because they allow accessing the "next" value in the sequence only when it's requested (as opposed to generating the entire sequence in advance and storing it in memory).

For this reason, generators can be used to create infinite sequences (for example, by using the yield keyword inside a loop):

function* fibonacci() {
  let [a, b] = [0, 1];

  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

const seq = fibonacci();

console.log(seq.next().value); // 0
console.log(seq.next().value); // 1
console.log(seq.next().value); // 1
console.log(seq.next().value); // 2
console.log(seq.next().value); // 3
console.log(seq.next().value); // 5
console.log(seq.next().value); // 8
// ...

While this generator function will run indefinitely, you can still control the flow of its execution by using the next() method to pause and resume it as needed. Alternatively, you could also use the return keyword to end the generator function prematurely.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.