Generators (in ES6) vs Regular functions


Redux-Saga utilizes a new ES6 feature called generators. Generators are functions which can be exited and later re-entered.

Simply calling a generator function, marked by the asterisk to the right of the function keyword, will not cause the body of the function to execute immediately. Instead an iterator object is returned (e.g., gen in the above example). When the iterator’s next method is invoked, the generator function’s body is executed up until the first yield (e.g., line 2 above). The iterator’s next method returns an object with a value property containing the yielded value and a done boolean property, which indicates whether the generator has yielded its last value.

But let’s take a step back. What is yield?

Line 2 above is called a ‘yield expression’ because when you restart the generator, you will send back in the value and it will be used as the newly evaluated value. In essence, the yield keyword makes a request for a value.

Unlike typical JavaScript functions, generator functions run through to completion. Generator functions can be ‘cooperative’, which is a function that chooses when it will allow an interruption, so that it can cooperate with other code. You can use the yield keyword to pause the function from inside of itself. Note that nothing can pause the generator from the outside. However, once paused the generator cannot restart itself. Only an external control can be used to restart the generator function.

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store