Understanding the Async in JavaScript

Definition: Async is a short form for “asynchronous”. Synchronous means executing statements one after the other which implies the next statement will get executed only after the previous statement is executed completely. Whereas in Asynchronous calls the next statement gets executed without even waiting for the previous one’s execution.

JavaScript is a Synchronous language. It means that line 10 in a file will run after line 9, by default. If you declare a variable on line 9 and use it in line 10, you might be hitting yourself on the head if you ran line 10 before line 9.

However, there is some merit in breaking this flow, especially when there is any sort of data transfer over the network involved because it takes time. And that’s where we need to bring in asynchronicity – the ability to override the normal flow of execution, to save time.

We have just heard that JavaScript has been built Synchronous, and we are better off not making any breaking changes to the language. Moreover, asynchronicity means we have to introduce threads and handle deadlocks. Java does it, and trust me, we are really better off not complicating JavaScript the same way. 

How do we do it? The answer lies in how JavaScript works, or rather, where it works – in the browser. It uses these inbuilt functions, commonly called Web Browser APIs for things like controlling the flow of commands, using the call stack, network data fetch, and others. These Web Browser APIs have been commonly misconceived to be part of JavaScript, but in reality, they are part of the browser, and JavaScript only uses them. 

Now think of it this way, we don’t really want JavaScript to disturb the flow of execution, but we still want some lines of code to run before they are expected to. How do we do it? Simple, ask someone else, who has some say in controlling the flow, to halt some code, while at the same time, the JavaScript can continue on with the code, essentially making synchronous code, Async.

As ludicrous as it sounds, that’s essentially what JavaScript has been doing.

Most of us have heard of a function called setTimeout() method. We have incorrectly assumed that it’s a JavaScript function, but unfortunately, it’s not. It’s a facade, a front for something weird happening behind the scenes. And ‘something weird happening behind the scenes’ is the Web Browser API called Timer. And this is where our Synchronous JavaScript code starts going Async.

Example:

Output:

f

We might be inclined to believe that what setTimeout() does is, wait for a 1000 milliseconds, then execute the whoSaysGfg() function, and then move on. 

What happens in the 1000ms? Does JavaScript just sit around and swat flies? They would be very lousy developers if they did that. And trust me, they’re anything but lousy. What actually happens, is that setTimeout() is a call to the Timer API, the timer limit being passed in as an argument, 1000 ms in this case, and the other argument being a callback function which will run when the timer finishes counting to 1000ms.

Note: What JavaScript has essentially done, is given up the control of the whoSaysGfg execution to the web browser. That setTimeout line is over for JavaScript. It can well continue with the next line of code, without caring about whether whoSaysGfg has run or not. So, JavaScript just became Async.

Example: Try guessing what the output to this might be ?

Output:

fg
g

If you’re thinking ‘gfg’, that’s incorrect. If you thought ‘fgg’, you’re right. We might tend to think that a timeout of 0 would essentially mean nothing and that the whoSaysGfg() function would be called back immediately. 

This has to do with how functions are called and run in the browser. Functions are added to the call stack when a script is run and called from there. Now, when the execution of a function is deferred to the browser, as is the case for setTimeout, the function sits in a queue known as a Task queue or a Callback queue, or a Macro Task queue. It sits there until the entire call stack is empty. 

The ‘event loop’ is a service that keeps checking the call stack and the task queue, and schedules the functions on the task queue to get onto the call stack as soon as it’s empty.

In this way, JavaScript, a synchronous language becomes Asynchronous. 

Note, that this is not the most optimal solution. Solutions like promises and async-await have come up, but this was the beginning of understanding the concepts of Async.