What to understand the Generator function in JavaScript ?

Generators generate value on the fly which means whenever there is a need for that value then only it will be generated. It means the value is generated but not stored in memory so it takes less time to execute. It uses asterick (*) symbol after the keyword function i.e. function* to tell javaScript it is a generator function. The generator function returns the object.

Use cases:

• It uses in infinite loop and does not stop computer or freeze your program.
• It uses as iterator.

It has special type of return keyword i.e. Yield. The purpose yield is to run some code then return value, run some more code and return value like that.

Example: It is useful when it’s expensive to do each step of the yield like when you are hitting an API endpoint on each yield and don’t know how many results users will want, so in that case, you can delay those API calls until they are actually needed.

Generators have two properties:

• Value property
• Done property

Syntax:

Javascript

function* Generator(){
  yield 1
  yield 2
  yield 3
}

const gen = Generator();

It uses three type of function mainly:

• Next function
• Return function
• Throw function

So, Here we discuss next function through example.

Example 1: This example shows the use of generators in Javascript.

Javascript

function* Generator() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = Generator();
console.log(gen.next());
console.log(gen.next());

Output

{ value: 1, done: false }
{ value: 2, done: false }

Example 2: This example shows the use of generators in Javascript.

Javascript

function* Generator() {
    console.log("before 1");
    yield 1;
    console.log("after 1");
    console.log("before 2");
    yield 2;
    console.log("after 2");
}

const gen = Generator();

Output: It does not print anything as when the generator calls the first time it creates an object that has the next property because the next property allows to singly execute all the code inside the generator.

Example 3: This example shows the use of generators in Javascript.

Javascript

function* Generator() {
    let i = 0;
    while (i < 5) {
        yield i;
        i++;
    }
}

const gen = Generator();
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

Output: Here while loop runs only 5 times, and after that loop terminate that’s why here 5th index value is undefined and done property is true as yield return till 5 value after that generator can’t generate value.

{ value: 0, done: false }
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 4, done: false }
{ value: undefined, done: true }

Example 4: This example shows the use of generators in Javascript.

Javascript

function* Generator() {
    let i = 0;
    while (i < 2) {
        yield i++;
    }
}

const gen = Generator();
console.log(gen.next().value);
console.log(gen.next().value);

Output:

0
1

Example 5: This example shows the use of generators in Javascript. Here generator use as iterator for array.

Javascript

function* Generator(array) {
    for (let i = 0; i < array.length; i++) {
        yield array[i];
    }
}

const gen = Generator([1, 3, 5]);
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());
console.log(gen.next());

Output

{ value: 1, done: false }
{ value: 3, done: false }
{ value: 5, done: false }
{ value: undefined, done: true }

Example 6: This example shows the use of generators in Javascript.

Javascript

function* Generator() {
    let i = 0;
    while (i < 4) {
        yield i++;
    }
}

const gen = Generator();
const gene = Generator();
console.log(gen.next());
console.log(gen.next());
console.log(gene.next());
console.log(gene.next());

Output

{ value: 0, done: false }
{ value: 1, done: false }
{ value: 0, done: false }
{ value: 1, done: false }

Each time when the generator function is called it creates a new instance for the separate object which has its own version of a function that can iteration through on its own.