This content originally appeared on DEV Community and was authored by Pranav Bakare
Here’s an example of a beginner’s guide to asynchronous programming in JavaScript, including code samples for various asynchronous patterns and an explanation of the event loop.
Understanding Asynchronous Programming in JavaScript: Beginner’s Guide to the Event Loop
JavaScript handles operations using synchronous and asynchronous approaches. The key to understanding asynchronous behavior is the event loop.
Synchronous and Asynchronous Code
Synchronous Code executes line by line, blocking subsequent lines until the current line finishes.
Example: Synchronous Code
console.log("First");
console.log("Second");
Output:
First
Second
Asynchronous Code allows some operations to run in the background and complete later, enabling other code to continue executing.
Example: Asynchronous Code with setTimeout()
console.log("First");
setTimeout(() => {
console.log("Second");
}, 0);
console.log("Third");
Output:
First
Third
Second
Asynchronous Patterns in JavaScript
- Callbacks
Callbacks are functions passed as arguments to other functions, executed after the first function completes.
Example: Callbacks
console.log(“Start”);
function asyncTask(callback) {
setTimeout(() => {
console.log(“Async task completed”);
callback();
}, 2000);
}
asyncTask(() => {
console.log(“Task finished”);
});
console.log(“End”);
Output:
Start
End
Async task completed
Task finished
- Promises
Promises represent a value that will be available in the future and can be used to handle asynchronous results.
Example: Promises
console.log(“Start”);
const asyncTask = new Promise((resolve) => {
setTimeout(() => {
console.log(“Async task completed”);
resolve();
}, 2000);
});
asyncTask.then(() => {
console.log(“Task finished”);
});
console.log(“End”);
Output:
Start
End
Async task completed
Task finished
- Async/Await
Async/await simplifies working with promises by allowing asynchronous code to be written in a more synchronous style.
Example: Async/Await
console.log(“Start”);
async function asyncTask() {
await new Promise((resolve) => {
setTimeout(() => {
console.log(“Async task completed”);
resolve();
}, 2000);
});
console.log(“Task finished”);
}
asyncTask();
console.log(“End”);
Output:
Start
End
Async task completed
Task finished
The Event Loop
The Event Loop manages how JavaScript handles asynchronous operations, distinguishing between microtasks and macrotasks.
Microtasks (e.g., promise callbacks) are executed before the next rendering.
Macrotasks (e.g., setTimeout) are executed after the current stack and all microtasks are completed.
Example: Event Loop with Microtasks and Macrotasks
console.log(“Start”);
setTimeout(() => {
console.log(“Macrotask: setTimeout”);
}, 0);
Promise.resolve().then(() => {
console.log(“Microtask: Promise”);
});
console.log(“End”);
Output:
Start
End
Microtask: Promise
Macrotask: setTimeout
This guide provides a foundation for understanding how JavaScript handles asynchronous operations and the event loop, helping you write efficient, non-blocking code.
This content originally appeared on DEV Community and was authored by Pranav Bakare