Asynchronous JavaScript

Let’s talk more about JavaScript and it’s ability to be asynchronous. What does that mean, and how can we wrangle or take advantage of that fact?

Please note that this class talks about asynchronous JavaScript, not async await.


On the sticky notes at your tables, respond to one or more of the following at the boards:

  • Everything you know about / questions you still have on asynchronous code
  • Everything you know about / questions you still have on fetch
  • Everything you know about / questions you still have on execution contexts & the call stack


When we say single-threaded, that could be read as doing one thing at a time, one-by-one until the code is done. When we say asynchronous, that could mean that multiple things are being done at different times. How can JavaScript do both? They seem to be in conflict with one another.

On Your Own

Take 15 minutes to read this article about how JavaScript is asynchronous and also single threaded.


With someone next to you, take turns discussing what you just read.

Notice that this article does not mention “promises”, which is a way to deal with asynchronous JavaScript that we have been using with fetch.

With Your Partner

Create a diagram similar to the article to demonstrate what happens when we use fetch. How does fetch fit in with the code above and below it?

Call Stack and Event Loop

How can JavaScript keep track of what code or function is running at any given time? How can we keep track or visualize how to expect the code to behave? JavaScript handles this using a few tools: the call stack, event loop, and a queue.

Let’s take a look at this video that has some great visualizations for the call stack, event loop, and queue. Pay close attention during the following points:

  • 4:15-6:00 (call stack with synchronous functions)
  • 6:40 (stack overflow example)
  • 7:20-8:50 (imagine if fetch were synchronous - we would have to wait for each request to complete before moving on)
  • 10:23-11:46 (asynchronous callbacks - setTimeout, what happens to the setTimout on the stack?)
  • 11:47-14:50 (intro to the event loop)

As you’re watching the video, please fill out this form, and we’ll discuss as a group after you’ve finished.

Check for Understanding

Let’s take this event loop example with setTimeout and translate it to what we have seen with fetch and promises. Note that the event loop will wait until the call stack is empty to run the .then from a fetch call.

Additional Resources

Lesson Search Results

Showing top 10 results