Generator function and yield keyword in Javascript

Order

In Javascript, what everyone discusses most is the operation of asynchronous programming and how to avoid multiple nesting of callbacks. Once asynchronous operation callbacks are nested a lot, not only will the code become bloated, but it will also be error-prone. Various asynchronous programming solutions are constantly being proposed, such as the well-known Promise, co, etc. The generator and yield discussed today are related to asynchronous programming and can help us synchronize asynchronous programming.

Introduction to Generator

Generator is similar to a function in form, except that there is an extra * between function and function name. The yield keyword must be used inside the Generator. For example:

function * gen(){
  var result1 = yield 'hello';
  var result2 = yield 'world';
  return result1 + result2;
}

When the Generator function is called, the code inside the function will not be executed, but a traverser will be returned, which contains a next method. Each time the next method is executed, the Generator function body will start executing until it encounters the yield statement, executes the statement and pauses here. The usage is as follows:

var g = gen();
g.next(1);
//{value : 'hello', done : false}
g.next(2);
//{value : 'world', done : false}
g.next();
//{value : 3, done: true}
g.next();
//{value : undefined, done: true}

Calling the next method will return an object. This object contains two attributes, value and done. Value is the value of the current yield statement. done indicates whether the Generator function body has been executed. The next method also accepts a parameter, which will be used as the return value of the yield statement and can be used by subsequent programs. When the program finishes executing or encounters a return statement, value is the return value of the function body, and done becomes true. At this point, if the next method is executed again, value will be undefined and done will still be true.

The application of Generator in traversal

In js, if we want to traverse an array, we can use statements like for...of to traverse. This is actually because the array contains a Generator traverser. If our self-defined object also contains a traverser, we can traverse the custom object through traversal statements such as for...of. This iterator is stored in the Symbol.iterator property.

var myArray = {
  0: '你',
  1: '的',
  2: '名字',
  length: 3
};

myArray[Symbol.iterator] = function * (){
  for(var i = 0; i < this.length; i++) {
    yield this[i];
  }
};

for(var item of myArray) {
  console.log(item);
}
//你
//的
//名字

The application of Generator in asynchronous programming

The core of Javascript is asynchronous programming. Each asynchronous operation will provide a callback function to return the execution result. Suppose we have several operations, and the latter operation depends on the result of the previous operation. If callbacks are used:

step1(function(value1) {
  step2(value1, function(value2) {
    step3(value2, function(value3)) {
      //some code
    }
  });
})

Code like this will make the program very difficult to understand as the number of nested callbacks increases. Error-prone. What we have to do is flatten the callback. The Promise object has such a function. Promise the above operations:

step1().then(function(value1){
  return step2(value1);
}).then(function(value2){
  return step3(value2);
}).then(function(){
  //some code
})

We can see that the nesting has become less, but this is not the most ideal solution. If we can turn asynchronous operations into synchronous operations, that is Without nesting, the program will become easier to understand. The Generator function provides us with such an opportunity.

function *workflow(){
  var value1 = yield step1();
  var value2 = yield step2();
  var value3 = yield step3();
  //some code
}

This is the result we want, asynchronous programming programs the form of synchronous programming. What we need to do next is to make this Generator execute, so we need an executor. co is an executor, allowing Generator to execute automatically.

co(function *workflow(){
  var value1 = yield step1();
  var value2 = yield step2();
  var value3 = yield step3();
  //some code
});

co has a limitation. The yield statement can only be followed by a Promise object or a Thunk function. For a more detailed introduction to co, you can refer to Teacher Ruan’s article The meaning and usage of the co function library. However, this method still needs to rely on external library functions, so the async and await keywords were proposed in ES6. async and await are actually syntax sugar for Generator. It just comes with its own actuator. Rewrite the above code into async form:

async function workflow(){
  var value1 = await step1();
  var value2 = await step2();
  var value3 = await step3();
  //some code
}

var result = workflow();

async没有了co的限制。await关键字后面可以跟 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。