Luke O'Malley
Sep 6 · 4 min read

JavaScript is single threaded, meaning that it can really only do one thing at a time. When you call a function, it get pushed onto the call stack, when that function returns it gets popped off of the stack. This limitation can actually be helpful because it allows you to write your program without worrying about concurrency issues. However, due to its single threaded nature you must avoid code that is ‘blocking’

function blocking () {
while(true) {
console.log('This goes on forever'
}
}
blocking()

When this function is called synchronously, it will block the main thread because the function will never resolve. If you were to run this code in your browser, the window would become unresponsive. This is because the main thread is busy working on that while loop and since JavaScript only has one thread it cannot process more than one thing at a time.

Now lets look at a more realistic example, imagine you were making a fetch call to an API to retrieve some data. If this action were to occur synchronously, our page would be non-responsive for a few seconds while the main JS thread is waiting for the data to come back from the server, however we know this is not the case, so how does javascript handle asynchronous tasks?

Web APIS

The browser consists of the JavaScript engine, and many other applications which allow a variety of things like sending HTTP requests and listening for DOM events. This functionality is exposed to JavaScript through WebAPIs

Web APIs run asynchronously meaning that they can perform their tasks in the background and leave the main JavaScript thread unblocked. Once finished with its task, the web API uses the a callback to get the data back into our main JavaScript thread. Lets take a look at a simple example

function logger() {
console.log('Starting...');
setTimeout(() => console.log(`setTimeout finished!`), 1000);
console.log('Finished!');
}
logger()

Running this code in the browser looks like this:

So how do functions like setTimeout go to Web API land and then back into JavaScript Land?

The Event Loop

The event loop is responsible for handling what code gets run next on the JavaScript thread. The event loop adds function calls to the call stack one by one in order. Looking at our example above, the logger() function will get pushed onto the stack. This function first calls console.log which will be pushed onto the stack, executed immediately and then popped off the stack. Next, the setTimeout function gets pushed onto the stack, however this time instead of logging the string ‘setTimeout finished!’ to the console immediately, the setTimeout function occurs asynchronously via a web API where it will wait for 1000ms before coming back to the main thread. JavaScript then pops setTimeout off of the stack and calls the final console.log. The logger() function then returns and is popped off of the stack. After this function returns, and the call stack is completely empty the event loop will pick up the callback function that we passed to setTimeout and push that onto the stack.

The Message(Callback/Task) Queue

When setTimeout is called the browser will start a timer through a web API, and code execution on the main thread will continue. When the timer expires, the callback function that was passed to setTimeout will be added to the message queue. Once the call stack is empty, the event loop looks at the message queue and checks to see if there are any functions that are queues for execution. If it finds any queued callback functions it will push them on to the stack and execute them. The event loop gives priority to the call stack and only looks at the message queue when the stack is completely empty.

Heres a diagram of what the browser looks like all together:

JavaScript Runtime Visualization Tool

To further explore what JavaScript is doing under the hood check out this tool made by Philip Roberts called Loupe.

If you’re interested in this topic and want to learn more check out these talks at JS CONF:

In The Loop

What the heck is the event loop anyway?

JavaScript in Plain English

Learn the web's most important programming language.

Luke O'Malley

Written by

Web Developer, Chemical Engineer, and Teacher with a passion for software development.

JavaScript in Plain English

Learn the web's most important programming language.

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