JavaScript Core | VoidX Academy

17. Asynchronous JavaScript

Async

Asynchronous JavaScript

JavaScript is single-threaded. It can only execute one command at a time. Asynchronous programming allows JS to offload long-running tasks (like downloading an image) to the background, and continue running the rest of the code.

📞 Callbacks (The Old Way)

A callback is a function passed into another function, waiting to be executed when a task finishes. This leads to "Callback Hell" when nested too deeply.

console.log("Start");

setTimeout(() => {
    console.log("2 seconds later...");
}, 2000);

console.log("End");
// Notice how 'End' prints BEFORE the timeout finishes!

OutputStart
End
2 seconds later...

🤝 Promises

A Promise is an object representing the eventual completion or failure of an async operation. It can be pending, fulfilled, or rejected. You handle them using .then() and .catch().

const fakeDownload = new Promise((resolve, reject) => {
    let success = true;
    if (success) resolve("Download Complete!");
    else reject("Network Error");
});

fakeDownload
    .then(data => console.log(data))
    .catch(err => console.error(err));

OutputDownload Complete!

⏳ Async / Await (The Modern Way)

Introduced in ES8, async/await is syntactic sugar on top of Promises. It allows you to write asynchronous code that looks synchronous, making it infinitely easier to read.

const fetchUserData = () => {
    return new Promise(resolve => {
        resolve({ user: "Prince", id: 1 });
    });
};

// The 'async' keyword allows you to use 'await' inside the function
const init = async () => {
    console.log("Fetching...");
    // Code pauses here until the Promise resolves
    const data = await fetchUserData(); 
    console.log("Received:", data.user);
};

init();

OutputFetching...
Received: Prince

17. Asynchronous JavaScript

Async

Asynchronous JavaScript

📞 Callbacks (The Old Way)

A callback is a function passed into another function, waiting to be executed when a task finishes. This leads to "Callback Hell" when nested too deeply.

console.log("Start");

setTimeout(() => {
    console.log("2 seconds later...");
}, 2000);

console.log("End");
// Notice how 'End' prints BEFORE the timeout finishes!

OutputStart
End
2 seconds later...

🤝 Promises

A Promise is an object representing the eventual completion or failure of an async operation. It can be pending, fulfilled, or rejected. You handle them using .then() and .catch().

const fakeDownload = new Promise((resolve, reject) => {
    let success = true;
    if (success) resolve("Download Complete!");
    else reject("Network Error");
});

fakeDownload
    .then(data => console.log(data))
    .catch(err => console.error(err));

OutputDownload Complete!

⏳ Async / Await (The Modern Way)

Introduced in ES8, async/await is syntactic sugar on top of Promises. It allows you to write asynchronous code that looks synchronous, making it infinitely easier to read.

const fetchUserData = () => {
    return new Promise(resolve => {
        resolve({ user: "Prince", id: 1 });
    });
};

// The 'async' keyword allows you to use 'await' inside the function
const init = async () => {
    console.log("Fetching...");
    // Code pauses here until the Promise resolves
    const data = await fetchUserData(); 
    console.log("Received:", data.user);
};

init();

OutputFetching...
Received: Prince

17. Asynchronous JavaScript

Asynchronous JavaScript

📞 Callbacks (The Old Way)

🤝 Promises

⏳ Async / Await (The Modern Way)

Knowledge Check

17. Asynchronous JavaScript

Asynchronous JavaScript

📞 Callbacks (The Old Way)

🤝 Promises

⏳ Async / Await (The Modern Way)

Knowledge Check