Anto Aravinth [Anto Aravinth] - Beginning Functional JavaScript: Functional Programming with JavaScript Using EcmaScript 6

Imagine you have a function like the following:

The above functions sync , sync1 , and sync2 do some operations synchronously and return the results. As a result, one can call these functions like this:

What if the operation is asynchronous? Lets see it in action:

Synchronous vs. Asynchronous

Synchronous is when the function blocks the caller when it is executing and returns the result once its available.

Asynchronous is when the function doesn't block the caller when its executing the function but returns the result once available.

We deal with Asynchronous heavily when we deal with an AJAX request in our project.

Now if someone wants to process these functions at once, how they do it? The only way to do it is like this:

Oops! You can see in the above code (Listing ), we are passing many callback functions to our async functions! This little piece of code showcases what Callback Hell is! Callback Hell makes the program harder to understand. Handling errors and bubbling the errors out of callback are tricky and always error prone.

Before ES6 arrived, JavaScript developers used Promises to solve the above problem. Promises are great, but given the fact that ES6 has generators at language level, we dont need Promises anymore!

As mentioned, generators are part of ES6 specifications and its bundled up at language level. We talked about using generators helping in handling async code . But before we get there, we are going to talk about the fundamentals of generators. This section will focus on explaining the core concepts behind generators. Once we learn the basics, we will be creating a generic function using generators to handle async code in our library. Thats the plan of this chapter. Lets begin.