What is Javascript Generator?

---

A generator is a special type of function that works as a factory for iterators. A function becomes a generator if it contains one or more yield expressions and if it uses the function* syntax.

Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators

Generators provide a powerful alternative: they allow you to define an iterative algorithm by writing a single function which can maintain its own state.

function* idMaker() {
  var index = 0;
  while(true)
    yield index++;
}

var gen = idMaker();

console.log(gen.next().value); // 0
console.log(gen.next().value); // 1
console.log(gen.next().value); // 2

The function* declaration (function keyword followed by an asterisk) defines a generator function, which returns a Generator object.

When the iterator's next() method is called, the generator function's body is executed until the first yield expression, which specifies the value to be returned from the iterator or, with yield*, delegates to another generator function.

function* anotherGenerator(i) {
  yield i + 1;
  yield i + 2;
  yield i + 3;
}

function* generator(i) {
  yield i;
  yield* anotherGenerator(i);
  yield i + 10;
}

var gen = generator(10);

console.log(gen.next().value); // 10
console.log(gen.next().value); // 11
console.log(gen.next().value); // 12
console.log(gen.next().value); // 13
console.log(gen.next().value); // 20

When next() method is called, it will return an object of:

{
  value: Any,
  done: Boolean
}

where done indicates whether or not the generator has yielded its last value.

Generator function with return,

function *foo() {
    yield 1;
    return 2;
}

var it = foo();

console.log( it.next() ); // { value:1, done:false }
console.log( it.next() ); // { value:2, done:true }

for..of

ES6 also embraces this iterator pattern at the syntactic level, by providing direct support for running iterators to completion: the for..of loop.

function *foo() {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
    return 6;
}

for (var v of foo()) {
    console.log( v );
}
// 1 2 3 4 5

console.log( v ); // still `5`, not `6` :(

As you can see, the iterator created by foo() is automatically captured by the for..of loop, and it's automatically iterated for you, one iteration for each value, until a done:true comes out. As long as done is false, it automatically extracts the value property and assigns it to your iteration variable (v in our case). Once done is true, the loop iteration stops (and does nothing with any final value returned, if any).

Source: https://davidwalsh.name/es6-generators

What is Generator use-cases?

In short, generator allow you will write a separate, small, focused function for every distinct business requirement, without mashing everything together.

We should let anonymous users buy tickets (make bets). When a purchase is completed, try to authenticate the user if they are not logged in yet. If they log in successfully, make a request to the server to buy one. Otherwise, wait for another purchase completion.

By the way, this is a technique called Gradual Engagement or “lazy registration,” and it’s very common in web apps to smoothen the UX.

Before (with redux trunks),

function completePurchase() {
  return function (dispatch, getState) {
    if (isAuthenticated(getState()) {
      dispatch(buy());
    } else {
      dispatch(openAuth({ onSuccess: completePurchase }));
    }
  }
}

function authReducer(state, action) {
  // we now have to manage the callback...
  switch (action.type) {
    case 'OPEN_AUTH':
      return { ...state, isAuthOpen: true, onSuccess: action.onSuccess };
    case 'LOGIN_SUCCESS':
      return { ...state, currentUser: action.user, isAuthOpen: false, onSuccess: null };
    case 'AUTH_CANCELED':
      return { ...state, isAuthOpen: false, onSuccess: null };
    default: return state;
  }
}

function loginSuccessful() {
  return function (dispatch, getState) {
    const afterAction = getState().auth.onSuccess;
    dispatch({ type: 'LOGIN_SUCCESS' });
    dispatch(afterAction());
  }
}

After (with redux-saga which uses generator functions)

function* authFlow() {
  // check if the user is authenticated already
  const isAuthed = yield select(isAuthenticated);
  if (isAuthed) {
    return true;
  } else {
    // dispatch an action to open the modal
    yield put(openAuthModal());
    // wait for either LOGIN_SUCCESS or AUTH_CANCELED
    const result = yield take([LOGIN_SUCCESS, AUTH_CANCELED]);
    if (result.type === LOGIN_SUCCESS) {
      return true;
    } else {
      return false;
    }
  }
}

function* purchaseFlow() {
  // execute the auth flow
  // `call` is the command to call other sagas
  const hasAuthed = yield call(authFlow);
  if (hasAuthed) {
    // dispatch an action that will actually make the request
    yield put(buyTicket());
  }
}

function* watchPurchaseFlow() {
  yield takeEvery(COMPLETE_PURCHASE, purchaseFlow);
}

Source: https://goshakkk.name/lazy-auth-redux-saga-flow/