Event Loop in JavaScript

I heard it comes under asynchronous programming. ok then let’s have a look at it !

Asynchronous JavaScript

well JavaScript is a single threaded language and it’s behaviour is to run commands as it comes in to sequential fashion. This is how JS is known as a synchronous in behaviour.

But sometimes things changes !

some time taking tasks comes up while synchronous execution which makes rest of the code to wait and this can make your application look dull or dumb while running. It can make your whole execution process too slow. So what’s the solution then ? How can we not disturb the smooth execution of our program ?

The answer is asynchronous behaviour.

Things which are executed not in sequential manner are asynchronous programming. Kindly don’t confuse it with parallel programming or multithreading. These are totally different concepts.

Asynchronous behaviour is achieved with the single thread. no parallel task is working while execution of other task.

let’s take an real life example !

There’s a queue of students in front of a college admission office.

The admin is in charge of the admission process. All students are standing in a queue along with their documents to start the admission process.

1st student comes and gives his document quickly and yay ! his admission process gets completed, next student comes but his dad is carrying the documentations from home and will take 30 minutes to reach to college. well till he’s dad comes with the documentation the rest of the students in the line and the admin can’t wait. admin says please stand out of the queue for now till your dad comes up with documentation.

Now this student steps out of the queue. rest of the students who are quick to process gets done with the admission. Finally dad reaches to the college after 30 minutes and handover documents to the student.

Now a security guard comes in to the picture who ask this student to wait in the lobby till all students in the queue gets done with the admission process.

there comes a time when no student is left in to the admission queue so immediately security guard says , ‘Hey boy ! all queue is empty now , yes you can go and do your admission process’

and here the student go to admin to the same place where students queue were and process his admission.

well its a long story !

If it’s taking time then pop it now out of the call stack and call it when the wait is over !

we know how functions run in call stack. Call stack doesn’t wait for anyone so as the code runs what ever code is in sequence format gets executed quickly.

But in our code whenever encountered any time consuming task like Image processing or a data fetch or even a time delay for a function to execute then those functions are popped out of call stack and waits somewhere !…now that somewhere is Web API’s environment.

don’t know how call stack works ?

So you might have came across setTimeout(), fetch ,console, local storage, DOM API’s, Location and many more…. well these things doesn’t belong to JavaScript. These are the services or features from browser. we use them in JS to make our tasks/requirements fulfilled. And how do we access these features ?

Answer is — Web API

Browser haves JS engine, call stack, and many more features

Let’s see it all happening with the code.

Synchronous execution of code.

Basically as we expected it runs the code. ‘In the sequence they are called’

Let’s see how asynchronous code works

Even if greeting has been called last still it will be executed first cause above functions are timetaking and have popped out of stack.

So in the real life example I mentioned above lets put it in this way…

Functions are pushed in callstack for execution but when one encounters that it’s gonna take time to execute then it’s popped immediately and rest of the functions gets executed. This popped function stays in web api’s environment till time waiting is done. Then it’s pushed to task queue to wait for it's turn to be pushed to call stack.

Event loop is like the security guard who checks whether the call stack is done with the other function’s execution or not ?

If yes ! then event loop push that function to call stack.

So here you noticed ? This function has been here in call stack before and now it is called back again after some time to execute. So this function is called as callback function. ‘we will call you later once you finished waiting kind of stuff’

I hope you are now not confused with asynchronous with parallel programming. As my aim to write this blog is not for totally beginners but for those who already knows a little about JS Asynchronous , callstack and their working but still they are bit confused.

If you feel this reading is worth then share it with your friends who wants to know more about async behaviour of JS !