DEV Community 👩‍💻👨‍💻

Cover image for 4 ways to use Generator Functions in JavaScript | Examples | Advantages
Tharun Shiv
Tharun Shiv

Posted on • Updated on

4 ways to use Generator Functions in JavaScript | Examples | Advantages

In this Article (Click to skip to that topic):

Complete video from YouTube - My channel - Developer Tharun

What are Generator Functions?

Ever imagined what would happen if a function had an infinite input or output to deal with? That is exactly what you can handle with Generator functions.

A Generator function returns us an iterator, which can be used to stop the function in the middle, do something, and then resume it whenever. A normal function starts executing and returns when the function completes, but a Generator function can be stopped any number of times and resumed later.

Want to learn Modern JavaScript ES6 - 2020??
Scroll to the end of the post
Enter fullscreen mode Exit fullscreen mode

Recap: What is a Function?

A function is a block of code that can be called any number of times to get the functionality done and sometimes the result returned.

How does it Work?

  1. Calling a Generator function does not execute the function completely as soon as its called. It will return an iterator object that can be used to use the function.
  2. So this function can be executed part by part, where these parts are decided by the yield expression. ( Code explanation below, don't worry ).
  3. To execute these parts, the .next() method is used on the iterator. When the .next() method is called, the function resumes execution until the next yield is found, or the function completes or a return statement is executed.
  4. Everytime you execute the .next() method, the generator function returns you with an object that looks like this
{
   value: 'some-value',
   done: false
}
Enter fullscreen mode Exit fullscreen mode

The value here is the value sent by the yield and the doneindicates if the generator function has run completely.

Examples

1. Basic usage of Generator Function

Generator functions are defined using the * asterisk either immediately after the function keyword or right before the function name. The below example creates an infinite number of natural numbers, which can be used when needed.

    function* naturalNumbers() {
        let number=1;
        while (true)
            yield number++;
    }

    var naturalNumberIterator = naturalNumbers();

    console.log(naturalNumberIterator.next().value);
    console.log(naturalNumberIterator.next().value);
    console.log(naturalNumberIterator.next().value);
    console.log(naturalNumberIterator.next().value);
Enter fullscreen mode Exit fullscreen mode

The output for the above code:

1
2
3
4
Enter fullscreen mode Exit fullscreen mode

2. Calling Generator within a Generator (wooo... inception)

We can use the yield* to call another generator from within a generator. ( Crazy right? )

    function *anotherGenerator(name) {
        yield `From Another Generator, ${name}`
    }

    function *myGenerator(name) {
        yield `Hi ${name}`;
        yield* anotherGenerator(name)
        yield 'Bye!'
    }

    let gen = myGenerator('shiv')
    console.log(gen.next().value);
    console.log(gen.next().value);
    console.log(gen.next().value);
Enter fullscreen mode Exit fullscreen mode

The output for the above code:

Hi shiv
From Another Generator, shiv
Bye!
Enter fullscreen mode Exit fullscreen mode

3. Passing arguments into Generators

Wonder what else the Generators could do? What if I told you that you can pass arguments into Generators? Again, just pass the parameters in the .next() and use it in the yield keyword inside the Generator function. Below is a demonstrated example of it.

    function *myGenerator() {
        console.log('Hey ', yield)
        console.log('Are you ',yield)
    }

    let gen = myGenerator()

    gen.next()
    gen.next('tharun')
    gen.next('shiv')
Enter fullscreen mode Exit fullscreen mode

Note that, you have to call .next() method once in the beginning, which will execute the function until the yield keyword. The next .next('tharun') will send the 'tharun' to the Generator and is replaced in place of yield. Below is the output of the program.

Hey tharun
Are you shiv
Enter fullscreen mode Exit fullscreen mode

4. Once returned, no more yields

Wonder what would happen if you execute a return statement inside a generator? Well, I have demonstrated just that in the below example. It returns from the generator function without providing access to any of the yield below.

    function* yieldAndReturn() {
    yield "Y";
    return "R";
    yield "unreachable";
    }

    var gen = yieldAndReturn()
    console.log(gen.next());
    console.log(gen.next());
    console.log(gen.next());
Enter fullscreen mode Exit fullscreen mode

The output is given below. You cannot yield the "unreachable".

{"value":"Y","done":false}
{"value":"R","done":true}
{"done":true}
Enter fullscreen mode Exit fullscreen mode

Advantages of using Generators? Why Should you use them?

1. Lazy Evaluation - Run only when you need

Say there is an Infinite Stream of data, we cannot spend our whole life evaluating that data. Hence we can use Generator function to evaluate as and when required.

2. Memory Efficient

As the Lazy Evaluation method is used, only those data and those computations that are necessary, are used.

Where do I learn these?

I have got the exact place where you can learn these from, ask doubts and also get a Certificate on Completion. Check out this course from Udemy (Click) JavaScript Modern ES6 - 2020 - The Complete Course - Udemy. The first few videos are free on my YouTube Channel. Try them out here: Being a Pro - YouTube JavaScript Playlist Thank you for reading!

This post was originally written at https://tharunshiv.com

Written by,

developertharun image

Thank you for reading, This is Tharun Shiv a.k.a Developer Tharun

Tharun Shiv

Top comments (6)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

Maybe you could edit the post to turn on JS syntax highlighting?

Collapse
 
developertharun profile image
Tharun Shiv

Hi Jon Randy,
Thank you very much for pointing it out, I learned a new markdown technique today. 😊

Collapse
 
chandrika56 profile image
Jaya chandrika reddy

Great way to learn fast and clearly 👌 Keep it up

Collapse
 
developertharun profile image
Tharun Shiv

Thank you ma'am, iptsl🙂

Collapse
 
ziyoweb profile image
Muhriddin Ziyodulloyev

perfect

Collapse
 
fahad07_khan profile image
Fahad Khan

Now, I have knowledge that how generator function works and its purpose. But can you tell me the real-world usage of this feature please ?

Classic DEV Post

brain computer interface

Experimenting with brain-computer interfaces in JavaScript