An Overview of Async in Javascript

Single-threaded and Synchronous Programming

If Javascript is your first programming language, (like it is for me) asynchronous functions can be a difficult concept to wrap your head around at first. The purpose of this article is to provide beginners with a conceptual overview of asynchronous programming. There are many articles that cover the technical portion (it can get complicated pretty quick), I will be recommending articles that cover this below. My suggestion is that you develop an understanding of what asynchronous programming is and when to use it before looking into technical aspects.

By nature Javascript is a single-threaded programming language, as a result when we’re first learning Javascript we are typically writing synchronous code. Single-threaded means that Javascript can only process one set of instructions at time and synchronous is essentially completing these set of instructions one at a time and in the order these instructions are being processed. This means that if an application is waiting on a set of instructions to complete, your application is stuck and cannot process further instructions until the prior one is complete.

Let’s try and visualize this concept, imagine 7:00 in the morning on your way to work you stop by the local McDonald’s and line up in the drive-thru. You decide to make a quick stop to grab a black coffee to day before heading to work. Except that you’re not the only person with this brilliant idea, there’s a whole line up of other cars with their own orders. Some people are ordering coffee, some are ordering breakfast combos, whatever the case may be. You’ve done this a couple hundred times at this point so you know exactly what to expect. This typical morning experience shares the concepts of single threaded and synchronous programming. If we assume that a customer is only considered “served” when they have received their order, this means that only one customer can be served at a time. In a drive-thru lane, only one person can be served at a time (Single-threaded) and they’re always served in the order that they have queued up. You cannot receive your order of black coffee until the people in front of you have received their orders (Synchronous).

Enter Asynchronous Programming

Asynchronous functions in Javascript are powerful because they allow us to address the bottleneck prevalent in synchronous programming. Instead of having to wait for instructions to complete before moving on, Asynchronous programming allow us to continue running the rest of our code while waiting for the outcome of the previous set of instructions.

To illustrate this, think back to the McDonald’s drive-thru example. Let’s say that this morning for some reason, there is a large number breakfast sandwich orders. As a result more eggs have to be cracked, wait for the eggs to be cooked, wait for the patties to finish grilling… you get the point. While all this is happening, the line is just getting longer and longer. If McDonald’s continued to operate synchronously, the average wait time for each customer is bottle-necked by the amount of time it takes for breakfast sandwich orders to be fulfilled. To relieve this constraint, McDonald’s can choose to implement an asynchronous action. I’m sure you’ve seen this before, in some McDonald’s there is a designated waiting area for orders that will take some time to complete. This waiting area is McDonald’s answer to the pitfalls of synchronous actions. While the breakfast sandwich order is being prepared, the customer is asked to move to the designated waiting area allowing the customer behind him to be served. Regardless of whether or not the customer at the window has received their order, once the customer’s breakfast sandwich is complete they immediately get served and they’re well on their way. This is a simple example, but it highlights the limitations of synchronous programming and how implementing asynchronous functions can help.

Javascript can integrate asynchronous functions through number of different ways. Asynchronous callbacks, promises, async and await functions are the tools we have at a our disposal in implementing asynchronous functionality. Callbacks is a quick way to get started and they are able to illustrate the concept really well. Take this function below, I’m sure it will look familiar to you.

Nothing fancy here, but lets see what happen if we declare and call another function after the setTimeout callback.

In this scenario, even though setTimeout is declared and called before the sayHello function is called, setTimeout prints to the console after sayHello. This illustrates that even though setTimeout’s instruction is still being processed, we’re still able to provide javascript with further instructions (declaring and calling the sayHello function). Once the 2500ms has elapsed, setTimeout prints out ‘Hello World!!’, completing its set of instructions.

This is a really simple demonstration of how asynchronous callbacks work and what you can expect it to do. Here is an article I recommend if you want more examples of async callbacks. Once you have developed a solid foundation of these concepts, the next thing you can look into it are Promises. Promises are the bread and butter of async programming in Javascript. They are used in conjunction with async callbacks and the async / await functions. Below are some articles to get you started.

Intro to Promises and then method:

Intro to Async and Await:

Comprehensive Guide on Promises:

Thanks for reading!