What is Generator next() Method in JavaScript?

Today, we will explore the next() method in JavaScript’s Generator object.

Keep reading to learn how it controls the execution of a generator function and understand its syntax, parameters, and return values.

We will provide practical examples and step-by-step guides on how to use it effectively in your JavaScript code. So what are you waiting for? Let’s dive in!

What is Generator next() Method in JavaScript?

The next() method in JavaScript is a built-in method that is a part of the Generator object.

When you call next(), it resumes the execution of the generator function from where it was last left off, running the code until it hits the next yield statement.

The yield keyword is used in a generator function to pause the function execution and send a value back to the caller.

It’s kind of like a return statement, but instead of ending the function entirely, it just pauses it.

When next() is called with an argument, that argument becomes the value of the entire yield expression where the generator was paused.

Syntax

generatorObject.next(value) ✅

Parameter

value (Optional)

The next() method can take one parameter, value, which is optional. If provided, this value will replace the yield expression in the generator function where execution was last paused.

Return value

The next() method returns an object with two properties:

value

This is the value that was yielded by the yield expression in the generator function.

done

This is a boolean indicating whether or not the generator function has finished executing. If there are no more yield expressions left in the function and it has returned, done will be true. Otherwise, it will be false.

Here’s an illustration:

function* countUp() {
    let count = 0;
    while (true) {
        yield count++;
    }
}

const counter = countUp();

console.log(counter.next().value); ✅
console.log(counter.next().value); ✅
console.log(counter.next().value); ✅
console.log(counter.next().value); ✅
console.log(counter.next().value); ✅
console.log(counter.next().value); ✅

As what you’ve noticed, each time we call counter.next(), we resume our countUp generator function, which yields the next number in the sequence.

The generator then pauses until we call next() again.

Here’s the output:

0
1
2
3
4
5

In a simple understanding, the next() method is a way to control a generator function’s execution, allowing us to produce a complex sequence of values over time in a way that would be difficult with regular functions.

How to use the Generator next() Method in JavaScript?

Here’s a step-by-step guide on how to use the next() method in JavaScript:

Step 1: Define a Generator Function

First, you need to define a generator function. A generator function in JavaScript is defined like a normal function, but with an asterisk () after the function keyword and uses the yield keyword to yield values.

function* sampleGenerator() {
    yield 'I';
    yield 'Love';
    yield 'Itsourcecode';
}

Step 2: Create a Generator Object

Once you have a generator function defined, you can create a generator object from that function.

let sample = sampleGenerator();

Step 3: Use the next() Method

Now that you have a generator object, you can use the next() method on that object to control the execution of the generator function.

console.log(sample.next().value); 
console.log(sample.next().value); 
console.log(sample.next().value); 

Each time you call next(), it resumes the generator function until it encounters the next yield statement.

The value of the yield statement is returned as part of an object, and execution of the generator function is paused.

When there are no more yield statements left in the function (i.e., the function has returned), calling next() will return { value: undefined, done: true }.

Here’s the complete code:

function* sampleGenerator() {
    yield 'I';
    yield 'Love';
    yield 'Itsourcecode';
}

let sample = sampleGenerator();

console.log(sample.next().value);  ✅
console.log(sample.next().value);  ✅
console.log(sample.next().value);  ✅

Output:

I
Love
Itsourcecode

Here’s another example of how you might use the next() method in a generator function:

function* greet() {
    yield "Hi";
    yield "Welcome";
    yield "to";
    yield "Itsourcecode";


}

const greetings = greet();

console.log(greetings.next().value); ✅
console.log(greetings.next().value); ✅
console.log(greetings.next().value); ✅
console.log(greetings.next().value); ✅
console.log(greetings.next().done);  ✅

In our example code above, we have a generator function greet() that yields four strings: “Hi,” “Welcome,” “to,” and “Itsourcecode.”

We create a generator object greetings from this function.

When we call greetings.next().value, it resumes the generator function and returns the value yielded by the yield expression. The first call returns “Hi” and so on.

After that, when we call greeter.next().done, it returns true because there are no more yield expressions left in the function, indicating that the generator function has finished executing.

Output:

Hi
Welcome
to
Itsourcecode
true

Conclusion

To sump up, the next() method in JavaScript’s Generator object is used to control the execution of a generator function.

It provides a way to produce a sequence of results over time, making it easier to work with asynchronous code.

Understanding and effectively using the next() method can greatly enhance your JavaScript programming skills and open up new possibilities for developing complex applications

We hope this article has provided you with enough information to understand the next javascript.

If you want to explore more JavaScript topics, check out the following articles:

• Replaceall string in JavaScript
• Remove special characters from strings in JavaScript
• JavaScript remove character from string

Thank you for reading Itsourcecoders 😊.

Caren Bautista

Technical Writer at PIES IT Solution

Responsible for crafting clear, well-structured, and beginner-friendly content across the platform. Handles the writing, proofreading, and editorial review of tutorials, guides, and documentation to ensure every article is accurate, readable, and easy to follow.

Expertise: Technical Writing · Content Creation · Documentation · Editorial Writing · JavaScript · TypeScript · Python · Python Errors · HTTP Errors · MS Excel  · View all posts by Caren Bautista →