Explain the different types of generators in JavaScript

As we all know, JavaScript is a lightweight programming language, and generators were introduced in ECMAScript 2015. A generator is a process that has many output values ​​and can be stopped and started. In JavaScript, generators consist of generator functions that produce an iterable of generator objects.

In this article, we will discuss generators in JavaScript and the different types of generators in JavaScript in detail, with detailed syntax and examples.

Introduction to Generators in JavaScript

The generator function is the same as the regular function, but with one difference, the generator function can be resumed and paused. Generally speaking, in JavaScript, functions don't stop once they're called. Typically, the concept of generators appears in asynchronous programming.

Syntax of generator functions in JavaScript

Now we will discuss the syntax of generator functions in JavaScript and compare it with regular functions.

function * syntax is used to construct generator functions, and the yield keyword is used to pause them.

function * genFunc() {
   yield 'Hello';
   yield 'World';
}
const g = genFunc(); // g is a generator
g.next(); // { value: 'Hello', done: false }
g.next(); // { value: 'World', done: false }
g.next(); // { value: undefined, done: true }
…

When a generator function is called for the first time, none of its code will be run, but a generator object will be returned. Values ​​are consumed by calling the generator's next() method, which runs the code until it encounters the yield keyword, at which point it pauses and waits until next() is called again.

In the above code, after our final statement, consecutive calls to g.next() will only produce the same return object: {value: undefined, did: true}, because we have Nothing is defined after 'world'. genFunc() function.

yield keyword pauses the execution of a generator function and provides the value of the expression that follows it to the generator's caller. It is comparable to the generator-based version of the return keyword. Can only be called directly from a generator function containing yield.

Comparison with regular functions

function regFunc() {
   console.log("Hello World");
}
// Hello World

In regular functions we do not use the "*" function, as you can see in the above example it does not use the yield function either. As we discussed above, the main difference between regular functions and generator functions is that generator functions can be stopped and paused. So from the above example, you can see that we did not choose to stop it, but directly printed the entire statement, which is "Hello world".

Now that we have understood the basics of generator functions, let us now move to the different types of generator functions -

Normal generator

In a normal generator, the generator acts as an iterator, generating the next value after each next() method call to generate the function. Let's look at an example where we will generate numbers one by one until the end of the list.

function* generator_function(){
   for(var cur = 0 ; cur<7; cur++){
      yield cur;
   }
}
var object_generator = generator_function();
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);

In the above code, we create a normal generic function containing the yield keyword and call it multiple times using the next() function.

Generator with parameters

Generators with parameters are a little different from normal generators, this time we have to pass a parameter using the next() function to send it to the generator function. Also, every time we pass a parameter, it will be stored after the yield keyword and not before, we will understand this concept in the following examples -

function* generator_function(){
   console.log("start of the function")
   temp = yield;
   console.log("This is the first value passed: " + temp)
   temp = yield;
   console.log("This is the second value passed: " + temp)
}
var object_generator = generator_function();
object_generator.next("This is not the first ");
object_generator.next("this is first");
object_generator.next("this is second");
object_generator.next();

In the above code, we defined the generator function and this time we passed the parameters to it. When we call the object for the first time, the given parameters are not printed because this is sent before the "yield" keyword and then after the value sent is stored in the variable and printed, the value is printed the second time After that, nothing happens because there is no output currently.

Generator with object properties

Generators can be used as objects, and when we call them, they only return the value assigned to them and can be printed. To understand this concept, let's look at an example.

function* generator_function(){
   yield "First value"
   yield "Second value"
   yield "Third value"
}
var object_generator = generator_function();
console.log(object_generator.next().value);
console.log(object_generator.next().value);
console.log(object_generator.next().value);

In the above code, first, we define three yield expressions, followed by a string. When we call the generator, the string following them will be returned.

There are also other types of generators, such as return types, some generators contain another generator inside, etc.

in conclusion

In the article, we learned that the generator function is the same as the regular function, but with one difference, the generator function can be resumed and paused. Generally speaking, in JavaScript, functions don't stop once they're called. Typically, the concept of generators appears in asynchronous programming. There are many types of generators, such as ordinary generators with objects such as parameters and properties, generators containing another generator, etc.

The above is the detailed content of Explain the different types of generators in JavaScript. For more information, please follow other related articles on the PHP Chinese website!