Asynchronous JavaScript

It is a common thing with us humans to judge someone without even knowing who they really are. We just create an impression with the first interaction itself. The thing is, that person would be way different than we thought he/she is. JavaScript can be related to that person as it is the most misunderstood language out there. But I can guarantee you that once you know what JavaScript really is, You would love it more than anything and also would enjoy coding. For that it is essential to understand how it works under the hood. So let me give it a try to explain how it actually works.

What is Asynchronous Programming

First of all, JavaScript is a synchronous single threaded language. Yeah, I know, It is a hell of a jargon. It just means that JavaScript can only process one thing at a time. At the first glance, this would sound awkward because if it could only execute one statement at a time, then if one statement takes longer time to execute, the others have to wait until its finished right? But that's not how it works, JavaScript is way more advanced than that. So this is when 'Asynchronous programming ' comes into picture. In the asynchronous world nobody waits for anything. That is, the statements are executed in parallel so that even if one process is longer than the others, It wouldn't stop others from executing. Now that you understood what asynchronous programming is, lets go a little deeper. Hold on tight

The Call Stack

I previously mentioned that JavaScript could execute only one statement at a time, the question is who is actually executing the code? The answer is the legendary Call Stack. Each and every code in JavaScript is executed through the call stack. Consider the code below

console.log("hello there!");

Once you execute this code, it is pushed into the call stack and is processed from there. After complete execution of the code, it is popped out of the stack and the program ends.

Now consider the code below.

console.log("This is 1st log");
setTimeOut(() => console.log("This is 2nd log"),5000);
console.log("This is 3rd log");

Here, there are more statements among which one takes 5 seconds time to execute. What do you think will happen? If your thought went the way that the 3rd log statement being executed after 5secs, I am afraid you are wrong. That's not how it works. Here's the big guns stealing the show, the Web API, the Call Back Queue and the Event Loop. Lets go one more level deeper.

The Asynchronous Part

setTimeOut(() => console.log("This is 2nd log"),5000);

When JavaScript encounters a code like this, it is no more executed in the call stack, it is taken out and stored in the Web API environment where a timer of 5secs is attached to it. Since it is popped out of the call stack, the remaining code is executed. So the 3rd log statement is executed and the call stack is cleared and the execution stops. Is that it? What about the 2nd log statement? No JavaScript has not abandoned that, it waits for the timer to expire. So after 5secs it is again pushed to the call stack. No no, not directly into the call stack. What if there are other statements being executed in the call stack even after 5secs? Pushing the code in between will result to unindented problems. But JavaScript deals with this cleverly. When the timer expires, the code first enters the Call Back Queue and it waits there till the call stack is empty. Another question arises is how would it know when the call stack is empty? Now its time for the final part, the Event Loop.

Event Loop

Event Loop is the one who continuously monitors the call stack and the callback queue. When the call stack becomes empty, the event loop takes the first code in the callback queue and pushes it into the call stack. This process continues until both the call stack and callback queue are empty.

What kind of code goes through this process?

The Dom events, the network responses, other API calls and more. When it comes to network calls, they are to be dealt with more priority. So the network responses goes through the Micro Task Queue which is similar to the callback queue but has more priority. That is, if there are codes in both the Micro Task Queue and Callback Queue, the code inside the Micro Task queue is processed first. No matter what the number of code inside the micro task queue is, the code inside the callback queue is executed only after all of the micro task codes are executed. So be cautious when dealing with these stuffs as it would block the code if there are significantly large amount of statements waiting in the queue. It will result badly as the UI will be stuck which is a bad user experience.

The Conclusion

That's it! Now you have a basic idea of how JavaScript deals with your code. There is more to it, this is just a basic introduction. I hope you realized how beautiful JavaScript is. So next time when you code, keep these things in mind. It will help you understand why the code is behaving as it is.

Asynchronous JavaScript: Basic Intro