Asynchronous Programming
Asynchronous Code
Asynchronous code allows a program to start a long-running task (like fetching data from a file) and continue with other tasks before the first one finishes.
This prevents the application from freezing, which is critical for user experience.
Control Flow
Control Flow is the order in which statements are executed in a program.
By default, JavaScript runs code from top to bottom and left to right.
Asynchronous programming can change this.
How JavaScript Runs Code
JavaScript executes code one line at a time.
Each line must finish before the next line runs.
The output is always A, B, C.
Function Sequence
JavaScript functions are executed in the sequence they are called. Not in the sequence they are defined.
This example will display "Hello Goodbye" because the functions are called in that order:
Example
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
This example will display "Goodbye Hello" because the functions are called in that order:
Example
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
Note
The examples above are normal synchronous flow.
Why Asynchronous Code
Some tasks can take a long time to finish.
Examples include network requests, timers, and user input.
To stay responsive, JavaScript can use asynchronous programming.
This allows certain operations to run in the background, and their results are handled later, when they are ready.
JavaScript Asynchronous Flow refers to how JavaScript handles tasks that take time to complete, like reading files, or waiting for user input, without blocking the execution of other code.
Asynchronous code does not run immediately.
- Timers run after a specified number of milliseconds
- Events run when triggered by an event
- Network requests run when the data arrives
Asychronous code lets the rest of the program continue to run.
If JavaScript waited for these tasks, the page would freeze.
Note
A frozen page is a broken page.
Asynchronous code does not block execution.
Example
myDisplayer("Start");
setTimeout(function() {
myDisplayer("Later");
}, 1000);
myDisplayer("End");
Try it Yourself »
The output is Start, End, Later.
Common Beginner Confusion
Example
let result;
setTimeout(function() {
result = 5;
}, 1000);
// What is result here?
Try it Yourself »
Result is undefined.
The async code has not finished yet.
Note
Beginners expect async results immediately.
JavaScript Events
Events are actions or occurrences that happen in the browser, often triggered by user interactions (like clicks, keypresses, or form submissions) or by the browser itself (like page loading or resizing).
Asynchronous Consepts
JavaScript handles asynchronus programming using different core consepts.
| Concept | Description |
|---|---|
| Synchronus | The JavaScript standard flow is executing line by line |
| Timers | Allows code to run while other code is waiting |
| Callbacks | Callbacks were the first solution for async JavaScript |
| Events | Stores callback function waiting to be executed |
| Promises | Tools to handle asynchronous operations cleanly |
| Async/Await | The clean and modern way to handle async code |
Asynchronous vs in Parallel
Parallel means doing multiple things at the exact same time on different processors.
Asynchronous is a way to handle multiple tasks by switching between them, not necessarily by running them simultaneously.
A single-threaded JavaScript engine handles asynchronous tasks by using an event loop to switch between them, rather than utilizing multiple CPU cores.
| Feature | Async (Deferred) | Parallel (Simultaneous) |
|---|---|---|
| Goal | Responsiveness (Don't freeze the app) | Performance (Get it done faster) |
| Execution | Non-blocking (waiting for I/O) | Simultaneous (crunching different numbers) |
| Hardware | Can run on 1 processor | Requires multiple processors |
| Example | Making an API call while user scrolls | Processing 10,000 images at once |
Asynchronous tasks run in the background (often on a different thread or in a different part of the system), and its completion is deferred (postponed) until later.
When the task finishes, it signals the main thread (usually via a callback, promise, or event) to handle the result.
Analogy: Ordering food at a restaurant. You place your order (async call), the chef makes it (deferred task), and you sit down and do other things. When the food is ready, the server brings it to you (callback).
In short, async tells the system:
- Start this task now
- I don't need the result immediately
- Notify me later when it's done
What You Will Learn
This tutorial will build the understanding of asynchronous programming step by step:
- What are Timeouts
- Why callbacks were created
- How promises represent future values.
- Why
asyncandawaitare preferred. - How to debug async code.
Each of these tool was created to solve problems from the previous tool.
