Javascript Event Loop Explained

By Henri Parviainen

Free eBooks for Web-developers

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)

multiplyLogger(2, 3)

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

First application calls multiplyLogger()

Javascript callback demonstration part 1

Javascript callback demonstration part 2

Javascript callback demonstration part 3

Javascript callback demonstration part 4

Javascript callback demonstration part 5

Javascript callback demonstration part 6

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.


setTimeout(() => {
}, 2000)


// 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.

Event loop explained part 1

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

"First" gets logged to console.

Event loop explained part 2

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

Event loop explained part 3

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

Event loop explained part 4

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

Event loop explained part 5

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

Event loop explained part 6

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

"Third" gets logged to console.

Event loop explained part 7

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.

Event loop explained part 8

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.

Event loop explained part 9

Callback gets added to call stack by event loop

Event loop explained part 10

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

Event loop explained part 11

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

"Second" gets logged to console.

Event loop explained part 12

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

Event loop explained part 13

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.

Javascript runtime and browser in event loop

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

Thanks for reading! ✌