Asynchronous JavaScript: Intro

The concept and its significance

Raimana Herrmann
Sep 25, 2017 · 6 min read

When I started learning JavaScript, the term “asynchronous” intimidated me; it sounded like an advanced concept I only needed to know when I’d become an equally advanced developer. This shallow intimidation caused me to glaze over the words whenever I read it online or heard it on my favorite podcast, Front End Happy Hour. But this was only a unfounded knee-jerk reaction to something unfamiliar and seemingly scary.

The truth is that if you’ve avoided “asynchronous” like I did, that is the only reason it has felt out of reach. It might take some struggling to understand, but it’s worth it because this concept isn’t just for advanced developers. It’s essential for all JavaScript developers. It’ll explain otherwise weird JavaScript behavior, inform why JS code looks the way it does, and serve as the gateway concept to things like callbacks, AJAX, promises and more. Since it underpins all these other things, we’ll try to decouple it from these related topics and focus on the concept itself. So let’s get started towards asynchronous nirvana.

Asynchronous Analogies

We’ll start with a few analogies of how we already use asynchronous (and synchronous) activities in our lives. Including synchronous examples will help contrast the two and illustrate each better. The goal is that each analogy will explain things in a different way and build upon each other, allowing you to put their pieces together and have everything fall into place.

Asynchronous goodness

Asynchronous Dishwashers

Dishwashers are useful entirely because they’re asynchronous. After you load one up and press “Start”, it does its thing and you can start doing other things before waiting for it to finish. And when it does finish, you can come back and put the dishes up.

Synchronous Grocery Store Checkouts

Grocery store checkouts are traditionally synchronous; you have to wait for the people in front of you to finish before you can start to do the same. As you know, this can make checkouts more of a pain if there’s lots of people in front of you and you have to wait longer.

Asynchronous & Synchronous Laundry

This is an interesting example because there’s an aspect of both. Like a dishwasher, after you load a washer and dryer up, you don’t have to wait for them to finish before you can start doing other things. This is asynchronous for you. But it isn’t the same for the clothes in washer. They have to wait for the clothes in the dryer to finish drying before they can start drying as well. This is synchronous.

Asynchronous & Synchronous Starbucks Orders

Let’s say you’re on your way to work and running short on time. But it’s pumpkin spice season and ain’t nothin’ gonna get in the way between you and that fall-spiced goodness. So you pull up to a Starbucks with a drive through and you have to choose whether or not it would be quicker to order inside or through the drive through. Your adrenaline kicks in and your heightened level of sight reveals there’s 10 people in line inside and 10 cars in line. So what do you do?

You order inside because you read this article the night before and get what asynchronous means. If you go inside, you might receive your order before someone in front of you; you don’t know exactly when you’d get it before others, but you wouldn’t have to wait for all 10 people to get their order before receiving yours. This is asynchronous thinking in action. Whereas if you go through the drive through, you do have to wait for all 10 cars in front of you to finish receiving their orders before you can receive yours. This synchronous option would take longer for you.

The Concept and Significance

Piecing together the analogies above and what they have in common, there’s a common thread between asynchronous and synchronous tasks. Synchronous tasks can be generalized by waiting lines; each individual must start and finish their transaction before the next individual can do the same. Once something synchronous starts, it must finish before the next task can begin; in other words, synchronous tasks are blocking. In contrast, after an asynchronous task starts, it doesn’t have to finish before another task can start; in other words, asynchronous tasks are non-blocking.

The key difference between the two is whether or not they block another task until they finish. This non-blocking characteristic is germane to the significance of asynchronous tasks: it means they can significantly reduce overall wait times in proportion to how long they take to finish. Think about using dishwashers, loading up Crock-Pots, and ordering delivery food. It would be terrible if you couldn’t do anything else while starting these tasks. Since they’re asynchronous and non-blocking, you’re free to start other things while you wait and that’s why we use them.

Image for post
Image for post
Asynchronous delivers

The Asynchronous Drawback

As useful as they are, asynchronous tasks do have a drawback. Think back to the Starbucks analogy. In comparison to the other asynchronous analogies, you don’t exactly know when your drink will be ready to pick up. Dishwashers and dryers have timers but that is an exception — not the norm. The vast majority of the time, you might know when something asynchronous starts but you won’t know when it will finish. With one asynchronous task, it doesn’t seem like a big deal, but imagine dealing with many of these tasks and if they’re dependent on each other.

The analogy for this is good ol’ Starbucks again. What if you and everyone in front of you ordered multiple drinks that take different amounts of time to finish? If it was just you ordering one drink, you might be able to guess when it would be ready based on prior experience. But with so many asynchronous orders going on at once, there’s no guarantee when drinks will finish and in what order. The only thing you can do is listen when your drinks are ready and proceed from there. That is the fundamental drawback and challenge of dealing with multiple asynchronous tasks: since you don’t know what order they’ll finish, you have to prepare by knowing what to do when they finish. This rapidly increases in complexity when dealing with many things all at once.

Summary

If something is asynchronous, it doesn’t have to finish before you can start doing other things. This non-blocking nature is super useful the longer something takes because it frees you up to do other things in the meantime. However, the more asynchronous things you have going on, the harder it can be to manage everything. Especially when you have asynchronous tasks that can only start after other asynchronous tasks finish. There’s no guarantee when any of them will finish, so the only way to prepare is by knowing what to do after something finishes. This is all in contrast to synchronous tasks. They’re easier to reason about since one thing happens at a time, but are very inefficient the longer they take.

Both are present and an important part of JavaScript, but asynchronous programming plays an especially crucial role since there’s so many asynchronous tasks. Whether sending requests to other websites or waiting for user input, JavaScript has to do to it all without blocking other things and making the user interface unresponsive. This article tries to lay out what it means to be asynchronous and hopefully you feel ready to tackle the concept within JavaScript next!


If you enjoyed this article, please consider holding down the clap button to give it some claps 👏. You can also follow me on Twitter.

If you didn’t, feel free to leave a comment below and tell me why so I can improve myself and my content. Thank you for reading! ❤️

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

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