How asynchronous JavaScript code gets executed in browser ?

Functions or operations that are running in parallel with the other functions or operations are called the asynchronous functions or operations in JavaScript. Asynchronous functions use Callback Functions that get executed later. Let us see an example that demonstrates this:

setTimeout(function greet() {
  console.log("Welcome to GeeksforGeeks!");
}, 2000);

In the above example, setTimeout is the asynchronous function and uses the callback function greet with a delay of 2000 milliseconds. Therefore, after the timer gets expired, the message gets printed in the console. Now, let's see how the above operation gets executed in the JavaScript engine of a browser.

Behind the scenes of execution of asynchronous JavaScript:

The JavaScript code gets executed by a Call Stack and as the Call Stack does not contain anything like a timer, we cannot delay the code execution. Therefore, for performing an asynchronous operations, we use the help of a web API setTimeout() which is available in the window global object in the browser.

Interestingly setTimeout is not a part of JavaScript, it is one of the many web APIs (Eg: setTImeout, DOM APIs, fetch, LocalStorage, console, location etc.) that are available in the global object of the browser. Browsers give the JavaScript engine the ability to access these web APIs through this global object. And, because window is a global object we can access the web APIs without the window keyword.

To see the behind the scene workings of asynchronous code getting executed in the browser, let us first see an example of asynchronous code.

Example:

setTimeout(function greet(){
    console.log("Welcome to GeeksforGeeks!");
}, 2000);

console.log("Hi!");

Here, setTimeout registers the callback function greet in the web API environment and attaches a timer with 2 seconds time. Now as everything JavaScript gets executed by Call Stack, the JavaScript engine will first create a Global Execution Context and will execute the last line and print "Hi!" in the console.

Once the execution is finished the Global Execution Context gets removed from the Call Stack. Now, after the timer gets expired, to print the greeting message we need to somehow fetch the callback function greet to the Call Stack in order to execute. This is done by Event Loop and Callback Queue.

After the timer gets expired, the callback function is put inside the Callback Queue and the job of the Event Loop is to check if the Call Stack is empty and if empty, push the callback function from Callback Queue to Call Stack and the callback function gets removed from the Callback Queue. Then the Call Stack creates an Execution Context of the call back function and executes it.  

Therefore, the output of the code will be:

Hi!
Welcome to GeeksforGeeks!

The second line will be displayed after the 2 seconds of delay. This is how an asynchronous operation in JavaScript gets executed behind the scene in the browser.

argha_c14

Follow

Improve

Article Tags :

• JavaScript
• Web Technologies
• JavaScript-Methods
• JavaScript-Questions