How does async work in javaScript

How does async work in JavaScript?

If JavaScript is a Single-threaded language then how does async work?

JavaScript is a single-threaded language, which means it has only one call stack that is used to execute the program.
 
As we know stacks are FILO that is First In Last Out. Similarly, within the call stack, whenever a line of code gets inside the call stack it gets executed and moves out of the stack. In this way, JavaScript is a single-thread language because of only one call stack. Before moving further let’s understand the difference b/w synchronous and asynchronous. In synchronous calls, all the work is done line by line i.e. first one task is executed then the second task is executed, no matter how much time one task will take.
 
In asynchronous calls, where one doesn’t wait for the one call to complete instead it runs another task simultaneously. So, when we have to do things like image processing or making requests over the network like API calls, we use async calls.
 
Now, you might wonder how async works in JS because we know it does. So, let me explain to you the concept of async call within JavaScript and how it is possible with single-threaded language.
 
Within JS we have a lexical environment, syntax parser, and an execution context (memory heap and call stack) that is used to execute the JS code. But except these browsers also have Event Loops, Callback queues, and WebAPIs that are also used to run the JS code.
 
How does async work in javaScript
DOM, AJAX, and Timeout are not actually part of JavaScript but the part of RunTime Environment or browser, so these can be run asynchronously within the WebAPI using the callback queue and again put in the call stack using the event loop to execute.
 
Let us take an example to be very clear about the concept.
				
					<script>
 console.log('Follow');
   
 setTimeout(() => {
    console.log('
@AnniMaan
');
   }, 3000);
     
 console.log('
@CodiesAlert2021
');
</script>

				
			

The output will be “Follow @CodiesAlert2021 @Anni_Maan“.

Let’s see why this happens as JavaScript is a single-threaded language so, the output should be “Follow @Anni_Maan @CodiesAlert2021” but it is not. When JS tries to execute the above program, it places the first statement in the call stack which gets executed and prints “Follow” in the console and it gets to pop out of the stack.
 
Now, it places the second statement in the call stack and when it tries to execute the statement, it finds out that setTimeout() doesn’t belong to JS so it pops out the function and puts in the WebAPI to get executed there.
 
Since the call stack is now again empty, it places the third statement in the stack and executes it thus printing @CodiesAlert2021 to the console.
 
The event loop checks if the call stack is empty or not or whether there is any statement in the callback queue that needs to be executed all the time.
 
As soon as the event loop checks that the call stack is empty and there is something in the callback queue that needs to be executed, it places the statement in the call stack and the call stack executes the statement and prints @Anni_Maan in the console of the browser.
 
In conclusion, JavaScript itself is a Single Threaded language but Browser’s Event loops, callback queues, and WEBAPI’s help it run asynchronously.

 

Leave a Reply

https://www.linkedin.com/company/77619036/admin/

welcome.

We connect you to a world of houseplants and urban gardening tailored to your home

Bloomer

Login to your account