Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How does asynchronous code work in JavaScript?
In this article, we will be exploring how async code actually works in JavaScript, how it is initialized, and how it is executed and called. But before moving on let's look at what is synchronous code and how it is different from asynchronous code.
-
Synchronous Code ? Code executes line by line in order. Each operation must complete before the next one starts. The program waits for each task to finish.
-
Asynchronous Code ? Code can execute without blocking the main thread. Operations can start and complete in the background while other code continues running. For example: downloading a file from the server.
How Asynchronous Code Works
JavaScript uses several components to handle asynchronous operations:
Call Stack ? Records function calls using LIFO (Last-In-First-Out) structure. Executes functions by removing them from the top of the stack.
Web APIs ? Browser-provided APIs like setTimeout, DOM events, and HTTP requests that handle async operations.
Event Queue ? Holds callback functions from completed async operations, waiting to be executed.
Event Loop ? Monitors the call stack and event queue. When the call stack is empty, it moves callbacks from the queue to the stack for execution.
Example: Understanding Execution Order
The following example demonstrates how synchronous and asynchronous code execute in different orders:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Asynchronous Code</title>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script>
console.log("Program Starts......");
setTimeout(() => {
console.log("setTimeout execution....");
}, 0);
new Promise((resolve, reject) => {
resolve("Promise resolved.....");
})
.then((res) => console.log(res))
.catch((error) => console.log(error));
console.log("Program Ends.....");
</script>
</body>
</html>
Program Starts...... Program Ends..... Promise resolved..... setTimeout execution....
Why This Order Occurs
The execution order happens because:
Synchronous code runs first ? "Program Starts" and "Program Ends" execute immediately on the call stack.
Promises have higher priority ? Promise callbacks go to the microtask queue, which has priority over the regular event queue.
setTimeout runs last ? Even with 0ms delay, setTimeout callbacks go to the event queue and wait for the call stack to be empty.
Common Use Cases
Asynchronous programming is essential for:
API calls ? Fetching data from servers without blocking the UI
File operations ? Reading/writing files in the background
User interactions ? Handling events like clicks and form submissions
Timers ? Scheduling code to run after delays
Conclusion
JavaScript's asynchronous execution relies on the event loop, call stack, and queues working together. Understanding this mechanism helps you write efficient non-blocking code and predict execution order in complex applications.
397 Views
