In my previous blog I've mentioned that Javascript is a single thread programming language. Which basically mean that it can do one thing at one time.

But I've also mentioned about how we can do multiple things at the same time with asynchronous programming. In this article, we are going to look at what is going on behind the scenes.

How or where does Javascript run ? This is a question that we can basically answer such as: Javascript is an interpreted language. It means, Javascript doesn't need to be compiled before it runs. An interpreter in browsers read Javascript code line by line and runs it.

So what is the process while running ? Now this is what I called the behind the scenes.

Let's think we are coding and we've created functions. Such as:

function first() {
  console.log("first");
}

function second() {
  console.log("second");
}

function third() {
  console.log("third");
}

first();
second();
third();

(I have always thought that foo, bar and baz make things more complicated for me). As you know, the output will be

first
second
third

In Javascript, when functions are invoked they are pushed to the call stack. Call stack is responsible for executing the current function. After a function returns a value it is popped off from the call stack. So the process continues such as. We can visualize it:

• First we have an empty call stack.
• Then we run the file and main() is pushed to the call stack.
• first() is pushed to the call stack and logged "first" and first() is popped off.
• second() is pushed to the call stack and logged "second" and second() is popped off.
• third() is pushed to the call stack and logged "third" and third() is popped off.
• main() is popped off.
• Finally we have an empty call stack

So think first() takes a really long time to execute. That means we have to wait for it so second() can be in the call stack. Suppose, we want a fluid UI or somewhere to click while first(). The call stack is busy with it. So it blocks us to do other stuff, that is what we called 'blocking' before. We don't want this.

So how is that going to happen. Browsers provide WEB Api's that Javascript engine doesn't. With this WEB Api's we can use DOM API, setTimeout, HTTP requests and more. This can help us create some async, non-blocking functions.

When an async function passes to call stack it actually moves to WEB Api and starts processing there. Let's think about a setTimeout function. No matter how many seconds later we want it to execute, it will move to WEB Api since it is async.

const baz = () => {
    console.log("faz");
}

const bar = () => setTimeout(() => {
    console.log("bar")
}, 1000);

const foo = () => {
    console.log("foo");
}

baz()
bar()
foo()

Think about this code, first baz will be called to the call stack and executed. After bar will be called to the call stack but it is async so it will move to WEB Api and will wait there for 1 second. Meanwhile foo is getting called in the call stack and executed. So far we can see in the output:

faz
foo

Well this is a basic example and after 1 second we'll also see bar in the output but how that happens ? After 1 second in WEB Api, it is passed to the Event Queue. WEB Api doesn't actually execute the code. It just waits for async process and after it's ready it passes functions to the Event Queue.

Event Queue is basically where functions are waiting for call stack to be empty so that they can be passed to there eventually get executed. Event Loop is the thing that handles passing process from the event queue to the call stack. It checks if call stack is empty and if so takes the first function in queue to the call stack to be executed and the process goes so on. That is how Javascript asynchronous part works well with the event loop.

Lets also demonstrate this with a graph:

So bar is the async function here. So it wasn’t executed in call stack and moved to WEB Api. First baz then foo get executed. After 1 second bar moved to the event queue and when the call stack is empty the event loop takes bar to the call stack and executes it. So we see an output like

faz
foo
bar // 1 second later

And that is it. This is how event loop works in Javascript.