Introduction and Application of Javascript Generator (Generator)

What is a generator?

A generator is a bit of code that runs inside a function

When the value is returned, it pauses on its own, and- The caller can ask to cancel the pause and return another value

This "return" is not the traditional slave function return. So it was given a special name-yield.

Generator syntax varies from language to language. The generator syntax for Javascript is similar to that for PHP, but it's very different, and if you want them to work the same way, you'll end up confused.

In javascript, if you want to use a generator, you need to:

Defining special generator functions Call this function to create 1 generator object Use the generator object in a loop, or call its next method directly

Let's start with the following simple program and perform each of the following steps:

// File: sample-program.js
function *createGenerator() {
 for(let i=0;i<20;i++) {
 yield i
 }
}

const generator = createGenerator()

console.log(generator.next())
console.log(generator.next())

If you run this code, you will get the following output:

$ node sample-program.js

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

Let me explain how the program works.

Generator function

First, there is a definition of the generator function in the code:

function* createGenerator() {
 for(let i=0;i<20;i++) {
 yield i
 }
}

The * following function tells javascript that this is a generator function. The following are valid definitions of generator functions.

function*createGenerator
function* createGenerator
function *createGenerator

* Is not part 1 of the function name. Instead, the function * symbol defines the generator.

Call the generator function

After defining the generator function, we named it a function with another name.

//  Note: When called, there is no  * .  *  That is not a function name 1 Part 
// `function *`  Is the symbol used to define the generator function 
const generator = createGenerator()

But remember that the createGenerator function does not return a value. This is because the generator function has no traditional return value. Conversely, when you call the generator function directly, it always returns the instantiated Generator object.

This generator object has one next method. Calling next will run the code inside the generator function.

function* createGenerator() {
 for(let i=0;i<20;i++) {
  yield i
 }
}

This is important enough to call it again. Calling the generator function directly does not run any code in the generator function. Instead, create a generator object. It calls the code in the generator function by calling next on the generator object.

The first time next is called on a generator object, the internal code runs straight until the yield statement appears. 1 Once yield is executed, javascript will suspend the execution of the code, and next will return (i.e. to you, or yield) an object containing the values in the line of yield.

When you call next the second time (or the third, fourth or more times), the code will cancel the pause and continue to run (where it was interrupted at the last call). A variable (such as i in this example) will keep its value. When the code reaches another yield statement, the function pauses again and returns an object containing an yield value.

That's why we call next twice

console.log(generator.next())
console.log(generator.next())

You get the following output:

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

After the code in the generator function is executed, any future call to next returns an object with a value of undefined and done set to true.

{ value: undefined, done: true }

Generators and loops

Although you can call next manually on the generator object, we will use it primarily in a loop. Look at this slightly modified program.

// File: sample-program.js
@highlightsyntax@jscript
function *createGenerator() {
 for(let i=0;i<5;i++) {
 yield i
 }
}

const generator = createGenerator()
for(const value of generator) {
 console.log(value)
}

When the generator object is used in the for... of loop, each loop calls next on the generator object and populates the variable with the resulting value (value above). Running the program will output the following:

$ node sample-program.js
0
1
2
3
4

In the next article, we'll take a closer look at the for... of loop and explore how to provide javascript with a built-in method to loop any object in javascript.

Summarize