Call back, Asynchronous JS, Web API, Event loop, Task Queue

 Call back

 One of the powerful concepts in JavaScript with which we can achieve asynchronous operation. 

JavaScript is single threaded language, which means at a single time one line of execution will happen. As JavaScript is single threaded it is by default synchronous in nature. Primitive JavaScript is synchronous, by implementing concept of callback asynchronous operation can be achieved.

Let us say we want to create a function to fetch data from server, which is often long running operation. Similar task can be reading content of a file which is time taking, even if we want to implement concept of timer. In this case, JavaScript has to wait till task is completed, this will result entire page to be unresponsive. This was case earlier. All these problems can be solved by use of call back. 

Let us design an activity to fetch data from server and perform some computation. This can be divided into following activity. 

i) Fetching data from server - To be done by browser API. 

ii) Performing some computation/display - To be done by JavaScript function. 

We can implement call back function for performing computation and pass it to data fetching API, which will first fetch the data and then call the call back function to implement JavaScript code. This will not impact any other JavaScript code making operation asynchronous. 

Web API - 

Web API is library provided by browser, the functions and modules implemented (may be in C/C++) in this library is by default available for use and we can simply call the function to perform required operation. We can utilize these API's to perform intended operation and provide call back. 

/*Web API and Call back implementation*/

console.log("1");

setTimeout(() => {

    console.log('A');

   

}, 3000);

console.log('2');

Here output would be 

1

2

A

In this case, setTimeout function API is getting executed in parallel in browser call stack along with other JavaScript code. So, 1 and 2 are printed ahead of A as there is delay of 3 sec in printing A.

Event Loop and Task Queue

/*Web API and Call back implementation*/

console.log("1");

setTimeout(() => {

    console.log('A');

   

}, 3000);

console.log('2');

console.log('3');

console.log("4");

setTimeout(() => {

    console.log('B');

   

}, 2000);

console.log('5');

console.log('6');

console.log('7');

console.log('8');

console.log("9");

setTimeout(() => {

    console.log('C');

   

}, 1000);

console.log('10');

Here, JavaScript call stack is single and function which execution context is on top will execute. Here setTimeout function is called from JavaScript code but it is executing in browser separate thread. Since browser API can run in multiple thread in browser this would be separate call stack independent from JavaScript call stack. That means the only job of JavaScript code is to invoke setTimeOut functionality in browser call stack and function call back is registered in register. So, the FEC for setTimeout is completed after invoking browser API functionality. 

The respective function objects are created in heap memory of JavaScript environment.  Once all the functions running in browser call stack are completed one by one, their references are then moved to Task Queue/ Call back Queue. In Task Queue function references are maintained and are eligible for execution after all the programs in JavaScript call stack is completed.

A special program called Event loop is responsible to monitor all the active programs running in FEC JavaScript call stack and once no line of code is present in FEC are completed and GEC finishes its tasks; references are moved one by one from Task Queue to JavaScript call stack for execution. In this way, execution is uninterrupted and required task from callback functions are achieved.

Here C has lowest timestamp, so it is executed first, followed by B and A.