How JavaScript Executes Code: Synchronous vs Asynchronous Execution
Javascript is a single-threaded language that executes one task at a time. However, it handles the asynchronous tasks very efficiently using the Web APIs, callback queues, and the event loop. This blog explains how JavaScript executes code synchronously and asynchronously, including the event loop mechanism. Synchronous Execution in Javascript javascript executes the code line by line following the LIFO approach in the call stack. The call stack keeps track of the function calls. function greet() { console.log("Hello"); } function ask() { console.log("How are you?"); } function bye() { console.log("Goodbye!"); } greet(); ask(); bye(); We can see this in the above code block. First, we made a function call for greet(), then for ask(), and then for a bye(). The output we get is Hello How are you? Goodbye! The output shows us that Execution is happening line by line. First, the greet function came to the call stack and executed itself, and then it popped out from the call stack. After this, the other two functions came to the call stack one by one, got executed, and popped out. From the above code and picture, we are transparent about the code synchronization in JS. Now, let's take a look at asynchronous Execution. Asynchronous Execution AsynchronExecutiontion means that JavaScript does not wait for a task to complete before moving on to the next one. Instead, it delegates certain operations (like network requests or timers) to the Web APIs, allowing the main program to continue running. We can understand it using the analogy of Maggie cooking. For cooking, Maggiee's steps are - Boiling the water (4 mins) cutting vegetables (5 mins) Make Maggie (2min) When you boil water for the maggie, you don't wait for it to cook; when it is boiled, you start cutting the vegetables. Instead, as you put the water to boil, you start to cut the vegetables and check whether the water is boiled. After cutting the vegetables, turn off the gas from the boiling water and make the maggie. Boiling water → A long-running asynchronous task (setTimeout, fetch). Cutting vegetables while waiting for water to boil → Other synchronous code executing without waiting. Checking if the water is boiled → The Event Loop checking if the async task is complete. Turning off the gas and making Maggi →. Executing the callback once the async task (boiling) is done. The event-loop callback queue will be explained further in the blog. Let's take a look at the Asynchornus code and its output -> console.log("Start"); setTimeout(() => { console.log("Inside setTimeout"); }, 2000); console.log("End"); For the above code block, the output will be Start End Inside setTimeout Inside setTimeout is between the Start and End, but it is printed at the last because of the asynchronous function setTimeout. Behind the scenes: "Start" is logged immediately. setTimeout() is encountered. Instead of blocking Execution, it delegates the task to the Web API and sets a timer for 2 seconds. "End" is logged immediately because JavaScript does not wait for setTimeout() to finish. After 2 seconds, the callback function inside setTimeout() is added to the callback queue. The event loop checks the call stack. Once it is empty, the callback function is executed, logging "Inside setTimeout." To observe the Execution of the code in js, you can go to this site click here Conclusion Synchronous Execution follows a linear, blocking approach. Asynchronous Execution allows JavaScript to perform other tasks while waiting for slow operations to complete. -The event loop ensures that asynchronous tasks execute only when the call stack is clear.
Javascript is a single-threaded language that executes one task at a time. However, it handles the asynchronous tasks very efficiently using the Web APIs, callback queues, and the event loop.
This blog explains how JavaScript executes code synchronously and asynchronously, including the event loop mechanism.
Synchronous Execution in Javascript
javascript executes the code line by line following the LIFO approach in the call stack.
The call stack keeps track of the function calls.
function greet() {
console.log("Hello");
}
function ask() {
console.log("How are you?");
}
function bye() {
console.log("Goodbye!");
}
greet();
ask();
bye();
We can see this in the above code block. First, we made a function call for greet(), then for ask(), and then for a bye(). The output we get is
Hello
How are you?
Goodbye!
The output shows us that Execution is happening line by line.
First, the greet function came to the call stack and executed itself, and then it popped out from the call stack.
After this, the other two functions came to the call stack one by one, got executed, and popped out.
From the above code and picture, we are transparent about the code synchronization in JS. Now, let's take a look at asynchronous Execution.
Asynchronous Execution
AsynchronExecutiontion means that JavaScript does not wait for a task to complete before moving on to the next one. Instead, it delegates certain operations (like network requests or timers) to the Web APIs, allowing the main program to continue running.
We can understand it using the analogy of Maggie cooking.
For cooking, Maggiee's steps are -
- Boiling the water (4 mins)
- cutting vegetables (5 mins)
- Make Maggie (2min)
When you boil water for the maggie, you don't wait for it to cook; when it is boiled, you start cutting the vegetables. Instead, as you put the water to boil, you start to cut the vegetables and check whether the water is boiled. After cutting the vegetables, turn off the gas from the boiling water and make the maggie.
- Boiling water → A long-running asynchronous task (setTimeout, fetch).
- Cutting vegetables while waiting for water to boil → Other synchronous code executing without waiting.
- Checking if the water is boiled → The Event Loop checking if the async task is complete.
- Turning off the gas and making Maggi →. Executing the callback once the async task (boiling) is done.
The event-loop callback queue will be explained further in the blog.
Let's take a look at the Asynchornus code and its output ->
console.log("Start");
setTimeout(() => {
console.log("Inside setTimeout");
}, 2000);
console.log("End");
For the above code block, the output will be
Start
End
Inside setTimeout
Inside setTimeout is between the Start and End, but it is printed at the last because of the asynchronous function setTimeout.
Behind the scenes:
- "Start" is logged immediately.
- setTimeout() is encountered. Instead of blocking Execution, it delegates the task to the Web API and sets a timer for 2 seconds.
- "End" is logged immediately because JavaScript does not wait for setTimeout() to finish.
- After 2 seconds, the callback function inside setTimeout() is added to the callback queue.
- The event loop checks the call stack. Once it is empty, the callback function is executed, logging "Inside setTimeout."
To observe the Execution of the code in js, you can go to this site click here
Conclusion
- Synchronous Execution follows a linear, blocking approach.
- Asynchronous Execution allows JavaScript to perform other tasks while waiting for slow operations to complete. -The event loop ensures that asynchronous tasks execute only when the call stack is clear.
