The Great Escape from Callback Hell

Here’s a list of my best web development tutorials.

Complete CSS flex tutorial on Hashnode.

Ultimate CSS grid tutorial on Hashnode.

Higher-order functions .map, .filter & .reduce on Hashnode.

You can follow me on Twitter to get tutorials, JavaScript tips, etc.

This tutorial is sponsored by Learning Curve Books. Grab a copy of this new exciting volume explaining every single CSS property in common use and supported by modern browsers.

To get a good idea of how flex works try flex layout editor on this page.

The Great Escape From Callback Hell

Making no Promises. Using generators and finally understanding async/await in-depth are all covered in this edition of my Medium JavaScript tutorial article — JavaScript Teacher @js_tut on Twitter.

To support my work Learn React JavaScript Library From Scratch can be purchased from Amazon. An intro to React. By grabbing one now you qualify for a free copy of React Architecture — my next React book!

It’s about time you know async and await. You know you wanted to for a long time. But for some reason… you just never got to it.

At this evolutionary stage of JavaScript you simply must understand it today. And this article will walk you through the whole enchilada.

First things first.

Image for post
Image for post
These are the basics of JavaScript events. In ES6 we also have arrow functions.

Okay. That’s the easy part. Moving forward.

So you’re at a point where you want to make a bunch of HTTP requests. And you decide to tie them all up together into a nice little hierarchy. But there is one more thing you are forgetting…

3. Chained events can quickly turn into an experience of Callback Hell.

This is especially true of events that retrieve JSON from codependent API endpoints via HTTP requests. Specifically, when next callback is blocked by data it must first retrieve from previous endpoint:

Image for post
Image for post
The proverbial JavaScript Callback Hell and none other.

4. Promise me it won’t ever happen again.

To battle the problem of syntactical mayhem some wise man created the idea of a Promise. What are the basic principles behind them?

Image for post
Image for post

5. Promises produce cleaner code.

You cannot sail the ocean until you build the boat.
Let’s make some Promises:

Image for post
Image for post
Treat unusual vertical bars surrounding strings as “ quote characters. I decided to leave them out here in this screenshot because it looked unusual. But also more interesting. You get bored with JavaScript staring at it at work for hours on end at work. Sometimes I wish double quotes looked just like this.

Return value: each Promise returns another Promise, making chaining then statements convenient. In some cases you can even remove arrow function and make the code look even more compact. JavaScript can now treat a function as a return value.

6. Best practice for Promises? (Other than keeping them IRL.)

There are two unique cases when using Promises depends on whether it matters which order events are executed in. Both examples below are considered best practice for each individual case:

Image for post
Image for post

7. We can end up in Promise Hell too when Promises are used incorrectly

Not all that shines is gold. Problems arise when Promises are not used as intended. When wrongfully used you can witness the same problem callbacks created earlier:

Image for post
Image for post
You can get stuck in Promise Hell while trying to resolve codependent promises in an ordered sequence.

So how do we get out?

8. Generator ‒ The Iterable Function.

A generator is not a Promise. It is only a control flow construct. They just work with Promises. Generators execute asynchronous events without blocking your code. But make the code look like regular synchronous code!

Generators in JavaScript are defined using a <function with a star> syntax.

Image for post
Image for post

Along came Bluebird. A Blue Jay? Jay Query? Put that drink down.

In Bluebird, all of what you’ve seen above is already packed into a convenient method coroutine on Promise object. So yes you can tinker with your own generators in great detail. Sort of like car mechanic with his engine modifications. Or you can use Bluebird to start working with generators quickly without worry. Most developers make that choice:

Image for post
Image for post

And that’s pretty much all to async. But wait, didn’t you mention async and await as actual keywords in JavaScript? Glad you asked.

Yes, indeed. In fact, when you heard of async for the first time, you heard of it as a JavaScript keyword. But wait, what did we just do all this time?

Well you see, generator’s yield is the building block of async. That’s why I waited so long until I got to this point.

I won’t go into details on their differences and similarities here right now. I plan to talk about this in my next article. But…I will just show you the async keyword in action. It’s very similar. Except the syntax is a little different:

Image for post
Image for post
Finally this is what async | await construct looks like in JavaScript.


You now have a handful of techniques to keep you away from Callback Hell.

Written by

Issues. Every webdev has them. Published author of CSS Visual Dictionary few others…

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