Introduction about javascript event loops

What is Javascript?

Javascript is a single threaded Programming Language. Ie) Single threaded runtime. It has single call stack which means that it can do only one thing at a time.

(Single-Threaded, non- blocking, asynchronous, concurrent language & uses callbacks)

What Is V8?

It is a chrome javascript engine. (Runtime of Javascript)

What is Call Stack?

It is a Data Structure which records where in the program we are.

Stack: It is a data structure which is used within Javascript to keep track of execution flow or order during your javascript program execution.

Say For Example:

function add(arg1, arg2) {

Return arg1+arg2;

}

Function print(input) {

var result = add(inputNum, inputNum);

            }

Print(1);

If the above program runs within JS engine, it will produce the following call mechanism within the stack data structure.

Rules: When a JS engine finds the function call, it will add the call into the stack. When the function finishes its execution, the JS engine will remove that particular statement from stack. (PUSH & POP technology).

Blocking? Why we require a non-blocking solution within javascript?

Now Lets see, where is blocking is in our js flow which leads to bring the non-blocking solution to javascript.

Example:

Var blocking =  read(); -- it will read some 100gb files from Disk which means that it will not going to execute the next statement at all.

Console.log(blocking)

How to resolve the blocking issue:

To resolve the current issue, we need to follow non-blocking concept. It is achieved through the implementation of the asynchronous callback technique.

How callback works?

Before getting to the implementation, let’s identify the remaining parts which are function of java-script execution in order to implement asynchronous callbacks.

    WebApi’s , Task Queue, Event Loops.

These are the 3 important mechanisms which are part of handling callbacks and it is the browser responsibility (not the javascript engine or javascript runtime) to co-ordinate and maintaining the inter-communication between them.

How does callback works?

Let me explain with a simple example:

Console.log(“1”);

//callback function. We are instructed to javascript that please execute this function after //3000ms.

setTimeout(function() { 

   console.log(“3”);

}, 3000);

Console.log(“2”);

Result:  1 2 3

How and what is the call stack?

0) Main()

1) Console.log(“1”);

2) setTimeout(cb, 3000) but it does not run now. It has to wait for 3 seconds. But somehow it disappears from the stack immediately without any action now. How? We will see later?

3) Console.log(‘2’);

4) After 3 seconds, the setTimeout function appears in the stack and executes the console.log statement. How does it happen?

--- This is where the concurrency and event loops comes into the delineation.

setTimout is an API provided by the browser not the runtime(V8 Javascript engine)

Solution for concurrency:

==================

 solution : Concurrency & the Event Loop

Javascript runtime (stack queue) is a single threaded. But browser has some thing which is doing the things. setTimeout is handling by browser. Until 5 seconds, browser is taking care of this. After 5 seconds, it will put this "call back" into task Queue. Now event loop is come into picture. Now event loop will check the 'stack', if stack is empty, it will take the tasks from'task queue' and placed into stack. Then JS Runtime will execute that function.