📘 Asynchronous JavaScript Notes
🔹 1. What is Asynchronous JavaScript?
Asynchronous JavaScript allows code to run in the background without blocking the execution
of other code.
👉 It helps in handling tasks like:
● API calls
● File reading
● Timers
● Database operations
📌 Why needed?
JavaScript is single-threaded, so async programming prevents blocking of the main thread.
🔹 2. Synchronous vs Asynchronous
✅ Synchronous (Blocking)
[Link]("Start");
[Link]("Task");
[Link]("End");
➡️ Output:
Start
Task
End
✅ Asynchronous (Non-blocking)
[Link]("Start");
setTimeout(() => {
[Link]("Task");
}, 2000);
[Link]("End");
➡️ Output:
Start
End
Task
🔹 3. Callback Functions
A callback is a function passed as an argument to another function.
function fetchData(callback) {
setTimeout(() => {
[Link]("Data fetched");
callback();
}, 2000);
}
function processData() {
[Link]("Processing data");
}
fetchData(processData);
📌 Problem: Callback Hell
doTask1(function() {
doTask2(function() {
doTask3(function() {
// messy code
});
});
});
🔹 4. Promises
A Promise represents a value that may be available now, later, or never.
📌 States of Promise:
● Pending
● Fulfilled
● Rejected
✅ Creating a Promise
let promise = new Promise((resolve, reject) => {
let success = true;
if (success) {
resolve("Success!");
} else {
reject("Error!");
}
});
✅ Consuming a Promise
promise
.then(result => [Link](result))
.catch(error => [Link](error));
✅ Chaining Promises
fe=> processData(data))
.then(result => [Link](result))
.catch(err =tchData()
.then(data > [Link](err));
🔹 5. Async & Await
Introduced in ES8, makes async code look like synchronous.
✅ Example
async function getData() {
return "Hello";
}
getData().then([Link]);
✅ Using await
async function fetchData() {
let result = await new Promise(resolve => {
setTimeout(() => resolve("Data received"), 2000);
});
[Link](result);
}
fetchData();
✅ Error Handling
async function fetchData() {
try {
let result = await [Link]("Error occurred");
[Link](result);
} catch (error) {
[Link](error);
}
}
🔹 6. Event Loop (Important Concept)
📌 JavaScript uses an Event Loop to handle async operations.
Flow:
1. Call Stack
2. Web APIs
3. Callback Queue
4. Event Loop
👉 The event loop checks:
● If call stack is empty → pushes async tasks from queue
🔹 7. setTimeout vs setInterval
setTimeout(() => {
[Link]("Runs once");
}, 1000);
setInterval(() => {
[Link]("Runs repeatedly");
}, 1000);
🔹 8. Fetch API (Real-world Async Example)
fetch("[Link]
.then(response => [Link]())
.then(data => [Link](data))
.catch(error => [Link](error));
✅ Using Async/Await with Fetch
async function getData() {
try {
let response = await fetch("[Link]
let data = await [Link]();
[Link](data);
} catch (error) {
[Link](error);
}
}
🔹 9. Key Advantages
✅ Non-blocking execution
✅ Better performance
✅ Improved user experience
✅ Efficient handling of I/O tasks
🔹 10. Interview Questions
1. What is asynchronous JavaScript?
2. Difference between callback and promise?
3. What is callback hell?
4. Explain async/await.
5. What is the event loop?
6. Difference between setTimeout and setInterval?
7. What are Promise states?
🔹 11. Summary
● JavaScript is single-threaded but asynchronous
● Async handled via:
○ Callbacks
○ Promises
○ Async/Await
● Event loop manages execution
