{"componentChunkName":"component---src-components-blog-template-js","path":"/blog/generator/","result":{"data":{"markdownRemark":{"frontmatter":{"title":"Generator Function","date":"2019-06-25"},"html":"

Generator function is a new feature in ES6, it is not like a normal function, with generator function we can control (pause, stop, resume) the execution process inside it.\nI will give comparison between those two to explain how generator function works.

\n

The code below is a normal function:

\n
function add(a, b) {\n  console.log('Start adding two numbers');\n  const result = a + b;\n  console.log('The result is : ' + result);\n  console.log('End of function');\n}
\n

With generator function, we can write the code above into this:

\n
function* add(a, b) {\n  yield console.log('Start adding two numbers');\n  const result = a + b;\n  yield console.log('The result is : ' + result);\n  yield console.log('End of function');\n}
\n

and then we execute that function like so:

\n
var gen = add(2,3)
\n

This will not give any results yet, because this add function is a generator and is now in pause, to continue executing the function, we need to use next()

\n
gen.next()
\n

The first we use next() will give result in console:

\n
Start adding two numbers\n{value: undefined, done: false}
\n

That done: false means that this generator function is not finished yet, there is more to it, so we can use next() again

\n

The second next() will give result:

\n
The result is : 5\n{value: undefined, done: false}
\n

The third next() will give result:

\n
End of function\n{value: undefined, done: false}
\n

The fourth next() will give result:

\n
{value: undefined, done: true}
\n

Now the generator function has reached its end of execution process, the value is undefined because we did not return anything.

\n

As you can see, generator is very powerful, we can pause the execution process as it deals with other things, and then come back to it and resume the execution later.

"}},"pageContext":{"slug":"/generator/"}},"staticQueryHashes":[]}