Javascript Event Loop Explained

Have you heard of Javascript event loop but it seems like a hard concept to grasp?

Don't worry!

After reading this post you will fully understand Javascript event loop and it will all make sense.

So let's get started!

What is javascript event loop?

The actual Javascript event loop is really simple, but it ties to three concepts you need to understand first.

• Call stack
• Web APIs
• Callback Queue

Let's go trough each of these one by one and see what they are.

Call stack

Call stack is provided by Javascript runtime (V8 for example).

As a single threaded programming language Javascript has only one call stack.

This means that only one thing can be executed at a time.

Call stack is simply a place where these executable contexts are placed in order for getting executed.

Call stack follows the LIFO principle (Last In First Out).

Let's look at an example to make this more clear.

const multiply = (x, y) => {
  return x * y;
};

const multiplyLogger = (x, y) => {
  const value = multiply(x, y);
  console.log(value);
};

multiplyLogger(2, 3);

Now let's walk trough how this code would execute on a call stack.

First application calls multiplyLogger()

As you can see - call stack is pretty simple.

Once executable is called in the runtime - it gets added to stack.

Once any executable context in call stack returns a value or finishes executing - it gets removed from the call stack.

Web APIs & callback queue

WebAPIs are APIs provided by the browser.

They kind of work as an artificial extra threads and allow us to execute multiple things at the same time for certain cases.

So you can think of it as WebAPIs helping the runtime by offerring a extra threads for executing time consuming tasks so that the call stack doesn't get blocked.

Callback queue is a queue where callback functions gets pushed from the WebAPIs once they have finished.

Let's look at an example once again so it will make more sense.

console.log("First");

setTimeout(() => {
  console.log("Second");
}, 2000);

console.log("Third");

// Expected output
// "First"
// "Third"
// "Second"

Notice that setTimeout is WebAPI provided by the browser.

How would this code execute in call stack?

Let's find out.

First console.log("First") will be called and thus added to call stack.

console.log("First") executes and gets removed from the call stack.

"First" gets logged to console.

setTimeout() gets called and it will get added to the call stack.

setTimeout() will call browsers timer and 2 seconds timer will start running on browsers timer thread.

setTimeout() gets removed from call stack since its done executing.

console.log("Third") gets called and added to stack.

console.log("third") finishes executing and gets removed from the stack.

"Third" gets logged to console.

2 second timer finishes and callback function gets pushed to callback queue.

WebAPIs will always push callbacks to callback queue once they have finished executing.

They can't add anything straight to call stack.

Now we finally get to the event loop part

Event loop has a really simple job.

All it does is it constantly checks if there is anything in the call stack to execute and if not it will check if there is anything in the callback queue.

If there is something in callback queue, event loop will push it to call stack - but only if the call stack is empty!

That's all that event loop does really.

It's that simple.

Callback gets added to call stack by event loop

console.log("Second") gets called by the callback function and it will be added to stack.

console.log("Second") gets executed and it is removed from the stack.

"Second" gets logged to console.

And finally our callback function is finished as well and gets removed from the stack.

And thats it really.

Thats how the event loop works in Javascript.

One last thing to note is that while call stack comes sraight from the javascript runtime (e.g. V8), Web APIs, Callback Queue and the event loop are actually provided by the browser.

Hopefully you found this explanation useful and if so be sure to share so others can learn too.

Thanks for reading! ✌