⚡ JavaScript Async

? Quick Overview

JavaScript is synchronous by default, which means it usually runs code line-by-line. With asynchronous features like callbacks and timers, JavaScript can handle tasks such as server requests, file reads, or delayed actions without blocking the rest of the code.

? Key Concepts

Synchronous: Each line waits for the previous one to finish.
Asynchronous: Some operations are scheduled to run later so other code can continue.
Callback function: A function passed as an argument to be executed after a task finishes.
Non-blocking behavior: Async tasks like setTimeout() do not freeze the main thread.

? Syntax & Theory

In asynchronous JavaScript, we often pass a function (callback) into another function. The callback is stored and executed later, typically when an async task (like a timer or API call) completes.

Common async tools:

setTimeout(callback, delay) – run callback once after delay ms.
setInterval(callback, delay) – run callback repeatedly every delay ms.

? Callback Example

Here a function simulates fetching data and then runs a callback to process that data.

? View Callback Code Example

function fetchData(callback) {
setTimeout(() => {
console.log("Data fetched");
callback();
}, 2000);
}

function processData() {
console.log("Processing data...");
}

fetchData(processData);

⏱️ Asynchronous Timing Example

This example shows that the code after setTimeout() continues to run immediately, while the callback runs later.

? View Timing Code Example

console.log("Start");

setTimeout(() => {
console.log("This runs later");
}, 2000);

console.log("End");

? Live Output & Explanation

If you run the timing example, the console output will be:

Start
End
This runs later (after ~2 seconds)

Even though setTimeout() appears between the two logs, its callback is scheduled to run later. JavaScript continues executing the rest of the code, then comes back to the callback after the delay.

? Common Use Cases

Simulating or handling server calls (fetching data from an API).
Delaying UI updates or showing loading spinners.
Running repeated tasks such as live clocks or status checks using setInterval().

? Tips & Best Practices

Use callbacks to run code only after an asynchronous task has finished.
Remember that async code does not run in simple top-to-bottom order—think in terms of timing.
Keep callback functions small and well-named to avoid confusion.
Avoid deeply nested callbacks (“callback hell”) by splitting logic into separate functions.
Always make sure you actually call the callback inside your async function when the work is done.
Use setTimeout() when you need a one-time delay, and setInterval() for regular repeated tasks.

? Try It Yourself

Create a sequence of messages that log after different delays using multiple setTimeout() calls.
Build a function that simulates a server call using a callback that runs when “data” is ready.
Practice chaining callbacks to simulate steps like “login → fetch user → fetch posts”.
Write a function that takes a callback and calls it after a random delay between 1–3 seconds.
Use setInterval() to print a message every second, then stop it after 5 seconds using clearInterval().
Take a deeply nested callback example and refactor it into smaller, separate functions to improve readability.
Answer in your own words: what happens if you forget to call the callback inside an asynchronous function?