JS illustrated: The event loop 🔁

Published in

Frontend Weekly

4 min readAug 15, 2019

Javascript is single threaded, yet, developers can write asynchronous code in Javascript!

But how is it possible? The event loop makes it possible!

Before we start, lets define the environment in which the event loop operates. We assume that we are dealing with Javascript code that is executed by a browser (not in Node or other environment).

Lets meet the heros of our story

The call stack

The call stack is a place in memory that keeps track of the function executing at that time, and the functions that are going to be executed after that. Each function is placed on top of the previous function. The first function added, is going to be executed last (First in, last out).

The web API

The web API is not part of the core JS, instead, it provides various methods that can be used by a Javascript program, like setTimeout() or alert().

The message queue

The message queue is a list of messages, waiting to be executed by their associated functions. A new message is added to the list, each time an event, that has been watched by an event listener, occures.

The event loop

The event loop is a process that keeps running and checks whether the call stack is empty or not. If the call stack is empty, it pushes the first item of the message queue into the call stack for execution.

Here’s the browser environment

A JS story

Lets take a look at the following code and see what happens

function foo() {
  console.log("One");
  setTimeout(() => {
    console.log("Two");
  }, 0);
  console.log("Three");
}
foo();

Calling the foo function, the result is

> One
> Three
> Two

Now, lets see our heros trying to execute the above code

First, the browser sends the foo() function call to the call stack.

The console.log("One") statement gets pushed on top of the previous frame.

In the meanwhile, the event loop checks to see if the call stack is empty

The JS runtime executes the top frame and removes it from the call stack.

Continuing the execution, the browser sends the setTimeout() statement to the stack

The event loop checks again

The environment sets up a timer that is going to trigger the callback inside the setTimeout

and the next statement is pushed into the call stack

Here’s the event loop again

The event loop did not find an empty stack so it does nothing again. The execution continues with the next, and final, statement of the foo() function

Lets get back to the web API, which set up a timer for a callback function. Now that the timer has ended, the browser sends the callback message to the message queue

After the last statement got executed, it is removed from the stack, and, as soon as there is nothing else inside the foo() function declaration, the oldest foo() frame is removed from the call stack too!

Now, the event loop may be more lucky