Javascript Notes, Part-04 - Async JS, and Event Loop.

Some background first:
Assume while executing code line by line, our (Thread of Execution)TOE meets with a code that runs really slow(maybe a server requests), then the code below that line has to wait because JS is synchronous language and it executes code line by line. This wait can sometimes take hours!

const tweets = getTweets("http://twitter.com/will/1")
// ⛔350ms wait while a request is sent to Twitter HQ
displayTweets(tweets)
// more code to run
console.log("I want to runnnn!")

To solve this, we have to make our code asynchronous but note that JS itself is synchronous. Big challenge!

This is where our browsers async features come into play.
Browser is amalgamate of JS + console + dev tools + sockets + DOM + rendering engines + underlying language etc.

Note that some features you think are JS are not even JS. For example, console, timeouts, XHR, DOM. These functionalities are provided by the browser.

Now, the question is, Can we elevate these browser features to introduce the concept of Async in JS? Yes, We can.

Let's look at an example, understand what is happening and what would happen in the snippet given below.

function printHello(){
 console.log("Hello");
}
setTimeout(printHello,1000);
console.log("Me first!");

1. Our function printHello gets stored in the global memory store.
2. setTimeout(a browser function) is called with two arguments a function and time.
3. Once the setTimeout function is invoked, our JS TOE proceeds to execute the code.
4. We now print "Me first" to the console.
5. setTimeout function starts a timer in the browser and once the timer is complete, the parameter function is put into something called the callback queue.
6. Now, there is one more thing called the event loop which checks if any function is currently on JS call stack or there is any global code that has to be executed.
7. When there is nothing in the call stack and no global code, we put the callback function from the callback queue into the call stack, put parenthesis at the end of function hence invoking the function.
8. Therefore, our callback functions which are passed into setTimeout will get executed only when there is nothing on the call stack and no remaining global code.

Summary:

• To introduce async concepts in our code we use browser features.
• Any callback function we pass into the browser functions gets executed only after there are no functions on the call stack and there is no global code yet to run.
• Event loop is what which infinitely checks call stack, global code, and call back queue.
• Note that even though we use setTimeout(printHello, 0) in the above example printHello will get executed in the end.

Alright! looks good, is there anything else? Oh yes, there is!

There are problems.

• You do many things using browser functionalities(like setTimeout) but we don't have anything to track stuff going on in the browser.
• We can't return a value from the function which is passed into browser functionalities, and hence the problem of callback hell.

We will learn ways to solve these problems in further posts.