Event Loop

Introduction:

Probably anyone who have learnt javascript would know how important the concept & working of "event loop" is. If you are attending an interview for any web developer job, it's 100 percent guaranteed that the interviewer is gonna ask this question. But it's also one of the toughest concept to comprehend. Many beginners and even the experienced folks have tough time to explain it properly thereby decreasing their chances of getting hired.

In this blog, we will learn what is event loop and how exactly it works.

• What is event loop ?

The Event Loop is a queue of callback functions. When an async function executes, the callback function is pushed into the queue. The JavaScript engine doesn't start processing the event loop until the async function has finished executing the code.

• Explanation :

Javascript is a single threaded programming language i.e it executes one statement(code line) at a time. And its also "synchronous programming language" i.e it executes statement one after the another.

But when you have codes which makes API calls, setTimeOut() etc. then javascript will skips those codes and rest of the synchronous codes are executed. And only after the synchronous codes are executed, asynchronous commands(API calls, setTimeOut() / whichever commands takes time) are executed later.

For example :

As you can see from the above example, when javascript starts executing, it will execute first statement. Second command is skipped. Then next, javascript executes the third statement.

Once all synchronous statements are executed, then asynchronous statements are executed.

But how exactly it works? Let's look at the flow of the execution:

a).

all the codes you have typed are stored in callstack and executed in order. The first statement enter the callstack and executed. Then next Second statement enters the callstack.

b).

Since the second statement is an asynchronous function, which takes time to execute is pushed to "event table". Event table is responsible for moving asynchronous codes to "Event Queue" after a specified time.

c).

In the "event table" , setTimeOut() waits for 1 sec(for specified milliseconds), and after the time passes, "event table" pushes it to "event queue".

d).

In the meantime, third statement enters the callstack and get executed.

e).

"Event loop" continously tracks the callstack. After the last synchronous statements are executed within callstack, "event loop" will check if there is any codes/statements within "event queue".

if its present, then event loop will pass it onto callstack, where the asynchronous codes/statements are executed.

And this is how event loop works. Hope this article made you understand how javascript executes synchronous and asychronous codes in your program.