Event Loop in JavaScript

If you are even slightly familiar with Javascript, you might have come across the term single threaded, non blocking, asynchronous, concurrent language. These terms might at first feel overwhelming to you as they did to me. Here I am trying to make your life easier and make you understand each one of them one by one…

Here’s a picture for your visualisation as to how Chrome runtime looks like:

Heap: It is a data structure where memory allocation happens.

Stack: It contains stack frames, push and pop operations take place on stack.

Web APIs: These are not a part of JS itself, these are the extra things that the browser provides. For ex: DOM, AJAX requests, setTimeout etc are not part part of JS.

Callback queue: It works on the principle of first come first serve. Whatever is at the starting of the queue is pushed on to the top of the call stack whenever stack is empty.

Lets talk about them in detail. JS is a single threaded language, which means it has a single call stack nad it can do one thing at a time. But problem here is that if a blocking operation comes in (operation which is slow like a big loop or an external API request), the browser will get stuck. Suppose we have a big while loop and because it’s synchronous, the browser is blocked till the loop is running, it can’t do anything else until those requests complete. But problem is you can’t block the stack like this, its neither convenient nor user friendly.

Well the solution is asynchronous callbacks. It pauses the execution of the function for a while, gives it a callback and runs it later. And this is where event loop kicks in, deferring the execution until the stack is clear. The point to be noted here is that JS runtime can do only one thing at a time, but it is the browser which gives us this event loop and a callback queue and some web APIs.

Look at the code below:

In the above code we have two console.log commands logging ‘Hi’ and ‘wait’ to the console and between them is a setTimeout call which logs ‘there’ to the console with a 3 ms wait time.

Here is how this code is actually running in the browser:

1. The browser pushes the first statement into the stack which is console.log(‘Hi’). This statement is executed and on completion it is popped out. ‘Hi’ is displayed in the console as shown in the left side of the image.

2. Now the second statement which is a setTimeout() function with 3ms wait time is pushed into the call stack and execution starts. setTimeout function uses Browser API to perform the function. It is then popped out of the stack once the handover to browser is complete.

3. Now the next statement console.log(‘wait’) is pushed on to the stack. After the execution this frame is popped out of the call stack and the stack is now empty.

4. Now the delay provided to the setTimeout is 3 ms, the callback will be added to the callback queue after 3ms. The event loop keeps a check on call stack and as soon as it is found empty, event loop pushes the first statement in the callback queue to the call stack for execution.

5. The callback function is pushed into the call stack and is executed. ‘there’ is displayed on the console. This is how event loop works in javascript.

Note: setTimeout() does not guarantee the actual delay for execution, it guarantees ‘minimum’ delay for execution.

This article is inspired by Philip Roberts’s talk on JS Event Loop. Thank you Philip for the video, it helped me understand JavaScript event loop in great depth.