event loop in javascript context

Event loop is much important concept to be understand exactly to get best out of Javascript. Without knowing event loop programmers can work on javascript but when it comes to higher degree of interactivity and smooth client interaction as your application grows event loop is a concept that Javascript developers have to master. There are many posts we can get the understanding of event loop. In beginning there are few prerequisite concepts that one have to grab before hand to understand end to end workflow of event loop.

Bit of history

Before coming directly to Javascript event loop and how it work it’s better if we consider the history of event loop at it’s early days since it make things much more clearer. Event loop is programming construct that systems implemented technique used message passing.

Event loop is the program construct wait event to occur and dispatch the occurred event with designated event handler of the particular event.

Going further into history this pattern was in need when things advanced to GUI based applications from one time executed command line based programs and form menu driven programming. Above two application types are less interactive to the users. But with the much interactive applications programs needed handle multiple processes for I/O bound operations as well as system related. Single event handler waiting to free resources were not supporting this kind of a interactivity. Usage of the event loop program construct allowed programs to wait until events to occur and add it to a pool letting those events to be handle by a another program, at same time giving user to go forward with the interacted workflow with out blocking most of the time. To further master OS level event loops there are more relevant posts can be found.
With having some idea about event we’ll move forward what really event to loop have to do with javascript. Javascript has two main context front-end based implementations and server side implementations.

Since most of us take the advantage of browser level Javascript, here as an example Chrome browser Javascript rendering can be much practical. The knowledge gain by that can lead us to understand even how nodejs works in server side too.

Rather Javascript is single threaded language, how really browser handle concurrent user interactions with a application? Behind the scene Javascript runtime only can do one thing at a time. But there are several component help Chrome to execute Javascript concurrent manner in the browser.

V8
In Chrome V8 is the Javascript rendering engine with directly compiles Javascript in to machine language instead of intermediate bite code. This increased browser performance in way Chrome with V8 engine won the browser war with firefox, safari & IE  with a par lead user base.

Call stack
Call stack is the place where browser keep the listing of records where is the current execution happens in the program,  which is recorded in a stacked data structure. So a simple console.log(“Hello world..!”); Directly pushed on to the Call Stack an immediately get executed and pop from the top of the stack. Simple but a effective way of handling the execution of a list of function. Once function is identified it get pushed to the top of the call stack, then once it’s executed it’s  removed or pop from the top of the stack.

Web APIs
Web API supports browser to additional features, like DOM, Ajax, Set time out. These API component can not be controlled or access or overwrite but which can be call using javascript API calls.

Callback/task queue
Callback queue is a list of tasks coming through Web API which are waiting to be pushed into the Call stack to get immediately executed. But this keep wait until Call stack is empty.

Event loop
With above components where event loop can fit inside the browser. When describing the Callback queue there’s a need interlink in between Call stack and Call back queue. Where a component can check weather Call stack is empty and push the Call back queue tasks in to Call stack if stack is empty. So this is repeating process where  this check and push process take place. Design methodology of event loop fits well to serve this need when executing Javascript in the browser.
Exact thing event loop does is constantly looking for Call stack to get empty and if it’s empty push new tasks into the Call stack from the Call back queue.

Why we want to know Event loop?
Getting to know how event loop exactly work helps developer get the applications responsive in higher degree of user interaction and also avoiding unexpected behaviour of application front end. Rather we don’t have controller over event loop proper basics can lead a developer toward better code where execution meets the expectations. Where reduces frozen GUI or lagging GUI as well as unexpected order of execution.

Server side context
Pretty much the same way that we can explain nodejs related event loop also works pretty much the same way difference is instead of Web API nodejs access C++ API. Event loop does the same fetch tasks from the queue and dispatch the event with the handler.

Code works

#1 sample

(function (){
console.log(‘Hello World..!’);
})();

Explanation :-

• task directly recorded to call stack and get executed

#2 sample

(function(){
setTimeout(function(){ console.log("Delayed Hello"); }, 3000);
})();

Explanation :-

• task record to call stack
• call stack execution calls setTimeout in browser API
• wait for 3 seconds since timeout is 3000
• add task to call back queue
• if call stack empty event loop push task to call stack

#3 sample

(function(){
console.log(‘Hello ’);
setTimeout(function(){ console.log("Just after Hello"); }, 0);
console.log(‘World..!’);
})();

Explanation:-

• console.log(‘Hello ’) push to the call stack
• log “Hello” to the console
• setTimeout push to call stack
• Call setTimeout browser API
• Add task to task queue
• same time console.log(‘World..!’) push to the call stack, because of this above console.log(“Just after Hello”) can’t enter call stack because it’s not empty
• Execute console.log(‘World..!’) in Call stack
• Now Call stack is empty can execute console.log(“Just after Hello”)

Important
Javascript execution asynchronously keep pushing event to the call stack, there for at the time setTimeout called console.log(‘World..!’) get push into the Call stack, therefore it execute immediately, then event loop get the chance to put a event push in the Call stack since it’s empty.
Another important point is to know setTimeout not clearly defines this the time of execution possible minimum delay is only guaranteed.