Why async and await are needed in Javascript - Why It Works This Way

Overview - Why async and await are needed

What is it?

Async and await are special words in JavaScript that help us write code that waits for things to finish without stopping everything else. They let us handle tasks that take time, like loading data from the internet, in a way that feels simple and clear. Instead of waiting and freezing the program, async and await let other parts keep working while waiting. This makes programs faster and easier to understand.

Why it matters

Without async and await, programs would have to stop and wait for slow tasks, like fetching data, making the whole app freeze or become unresponsive. This would make websites and apps feel slow and frustrating. Async and await solve this by letting programs do many things at once smoothly, improving user experience and making coding easier and less error-prone.

Where it fits

Before learning async and await, you should understand basic JavaScript functions, promises, and how JavaScript runs code step-by-step. After this, you can learn about advanced asynchronous patterns, error handling in async code, and how to use async/await with other JavaScript features like generators or streams.

Mental Model

Core Idea

Async and await let your code pause for slow tasks without stopping everything else, making asynchronous work look and feel like normal, step-by-step code.

Think of it like...

Imagine cooking dinner while waiting for water to boil. Instead of standing and staring at the pot, you do other tasks like chopping vegetables. Async and await are like reminders that let you pause one task and do others until the water boils, then come back smoothly.

┌─────────────┐       ┌─────────────┐       ┌─────────────┐
│ Start code  │──────▶│ Await result│──────▶│ Continue    │
│ runs        │       │ (pause here)│       │ after wait  │
└─────────────┘       └─────────────┘       └─────────────┘
       │                    ▲                      │
       │                    │                      │
       │               Other tasks run             │
       └──────────────────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding synchronous code

Concept: Learn how JavaScript runs code one line at a time, waiting for each step to finish before moving on.

JavaScript normally runs code from top to bottom. For example: console.log('First'); console.log('Second'); console.log('Third'); This prints 'First', then 'Second', then 'Third' in order, because each line waits for the previous one to finish.

Result

Output: First Second Third

Understanding that JavaScript runs code step-by-step helps see why waiting for slow tasks can freeze the program.

2

Foundation

Introduction to asynchronous tasks

Concept: Some tasks take time, like loading data, and JavaScript can start them and keep running other code without waiting.

For example, setTimeout lets us delay a message: console.log('Start'); setTimeout(() => { console.log('Waited 1 second'); }, 1000); console.log('End'); Here, 'End' prints before 'Waited 1 second' because setTimeout runs asynchronously.

Result

Output: Start End Waited 1 second

Knowing that some tasks run in the background helps understand why we need special ways to handle their results.

3

Intermediate

Promises as placeholders for future results

🤔Before reading on: do you think promises immediately give you the final result or something else? Commit to your answer.

Concept: Promises represent a value that will be ready later, letting us attach code to run when the value arrives.

A promise looks like this: const promise = new Promise((resolve) => { setTimeout(() => resolve('Done!'), 1000); }); promise.then(result => console.log(result)); This waits 1 second, then prints 'Done!'.

Result

Output after 1 second: Done!

Understanding promises is key because async and await are built on top of them to make code easier to write and read.

4

Intermediate

Challenges with promise chaining

🤔Before reading on: do you think chaining many promises is easy to read or can it get complicated? Commit to your answer.

Concept: Using many .then() calls can make code hard to read and understand, especially with errors or multiple steps.

Example of chaining: fetchData() .then(data => processData(data)) .then(result => saveResult(result)) .catch(error => console.error(error)); This works but can become messy with many steps.

Result

Code runs steps in order but looks complex.

Knowing the limits of promise chaining shows why a clearer syntax like async/await is helpful.

5

Intermediate

Async functions simplify asynchronous code

🤔Before reading on: do you think async functions run synchronously or asynchronously? Commit to your answer.

Concept: Async functions let you write code that looks normal but handles asynchronous tasks behind the scenes.

Example: async function load() { const data = await fetchData(); console.log(data); } load(); Here, await pauses inside the function until fetchData finishes, but the rest of the program keeps running.

Result

Output: (data from fetchData when ready)

Understanding async functions helps write asynchronous code that is easier to read and maintain.

6

Advanced

How await pauses without freezing program

🤔Before reading on: does await stop all code or just the async function it’s in? Commit to your answer.

Concept: Await pauses only the async function, letting other code run, so the program stays responsive.

Example: async function waitAndLog() { console.log('Before await'); await new Promise(r => setTimeout(r, 1000)); console.log('After await'); } waitAndLog(); console.log('Outside async'); Output: Before await Outside async After await (after 1 second)

Result

Shows that await pauses only inside the async function.

Knowing await’s pause scope prevents confusion about program freezing and helps write smooth asynchronous code.

7

Expert

Async/await and error handling nuances

🤔Before reading on: do you think errors inside async functions behave like normal try/catch or differently? Commit to your answer.

Concept: Errors in async functions can be caught with try/catch, but unhandled promise rejections behave differently and need careful handling.

Example: async function fail() { throw new Error('Oops'); } fail().catch(e => console.log('Caught:', e.message)); // Without catch, error causes unhandled rejection warning. Try/catch inside async: async function safeFail() { try { await fail(); } catch (e) { console.log('Caught inside:', e.message); } } safeFail();

Result

Errors can be caught inside or outside async functions, but missing catch causes warnings.

Understanding error flow in async/await prevents bugs and improves program reliability.

Under the Hood

Async functions return promises automatically. When the code hits await, it pauses the function's execution and returns control to the main program. The awaited promise runs in the background. When it resolves, the function resumes from where it paused, continuing with the resolved value. This uses JavaScript's event loop and microtask queue to manage timing without blocking the main thread.

Why designed this way?

JavaScript was designed to run in browsers where freezing the interface is bad. Early asynchronous code used callbacks, which were hard to manage. Promises improved this but still led to complex chains. Async/await was introduced to make asynchronous code look like normal, readable code, reducing bugs and improving developer experience while keeping non-blocking behavior.

┌───────────────┐
│ Async function│
│ starts       │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Hits await    │
│ (pause here) │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Returns to    │
│ main program  │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Promise runs  │
│ in background │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Promise       │
│ resolves      │
└──────┬────────┘
       │
       ▼
┌───────────────┐
│ Async function│
│ resumes       │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does await block the entire program or just the async function? Commit to your answer.

Common Belief: Await stops all code execution until the awaited task finishes.

Reality: Await only pauses the async function it’s in; other code keeps running normally.

Why it matters: Believing await blocks everything leads to confusion and incorrect assumptions about program responsiveness.

Quick: Do async functions always run in parallel automatically? Commit to your answer.

Common Belief: Async functions run at the same time automatically, like threads.

Reality: Async functions run on a single thread and only pause at await; they don’t run in parallel unless explicitly started.

Why it matters: Thinking async means parallel can cause wrong designs and unexpected performance issues.

Quick: Does using async/await remove the need to understand promises? Commit to your answer.

Common Belief: Async/await hides promises completely, so you don’t need to know about them.

Reality: Async/await is built on promises; understanding promises is essential to use async/await well.

Why it matters: Ignoring promises leads to misuse of async/await and harder debugging.

Quick: Can you use await outside an async function? Commit to your answer.

Common Belief: You can use await anywhere in your code.

Reality: Await can only be used inside async functions (or top-level in some environments).

Why it matters: Trying to use await outside async causes syntax errors and confusion.

Expert Zone

1

Async functions always return promises, even if you return a normal value; this implicit wrapping can affect how you chain calls.

2

Using multiple awaits in sequence pauses each step, but running promises in parallel with Promise.all can improve performance; mixing these requires careful design.

3

Unhandled promise rejections in async functions can crash programs or cause silent failures; proper error handling is critical in production.

When NOT to use

Async/await is not ideal for CPU-heavy tasks that block the event loop; in such cases, use Web Workers or separate processes. Also, for simple one-off callbacks, traditional callbacks or direct promise usage might be simpler.

Production Patterns

In real-world apps, async/await is used with try/catch for error handling, combined with Promise.all for parallel tasks, and integrated with APIs like fetch or database calls. Developers also use linters and type systems to catch async misuse early.

Connections

Event Loop

Async/await relies on the event loop to manage task scheduling and execution order.

Understanding the event loop clarifies why await pauses only the async function and how JavaScript stays responsive.

Coroutines (in other languages)

Async/await is a form of coroutine that allows pausing and resuming functions.

Knowing coroutines in languages like Python or Kotlin helps grasp async/await’s power and limitations.

Multitasking in Operating Systems

Async/await mimics cooperative multitasking by letting tasks yield control voluntarily.

Seeing async/await as cooperative multitasking connects programming with how computers manage multiple jobs efficiently.

Common Pitfalls

#1 Forgetting to use await inside async functions causes unexpected behavior.

Wrong approach:

async function getData() {
const data = fetchData(); // missing await
console.log(data);
}

getData();

Correct approach:

async function getData() {
const data = await fetchData();
console.log(data);
}

getData();

Root cause:

Not realizing fetchData returns a promise and that without await, data is the promise itself, not the resolved value.

#2 Using await outside async functions causes syntax errors.

Wrong approach:

const data = await fetchData(); // SyntaxError outside async

Correct approach:

async function load() {
const data = await fetchData();
console.log(data);
}
load();

Root cause:

Misunderstanding that await is only valid inside async functions or top-level environments.

#3 Sequential awaits when parallel execution is possible causes slow code.

Wrong approach:

async function loadAll() {
const a = await fetchA();
const b = await fetchB();
console.log(a, b);
}

Correct approach:

async function loadAll() {
const [a, b] = await Promise.all([fetchA(), fetchB()]);
console.log(a, b);
}

Root cause:

Not recognizing that awaits pause one after another instead of running tasks concurrently.

Key Takeaways

Async and await let you write asynchronous code that looks like normal, step-by-step code, making it easier to read and maintain.

Await pauses only the async function it’s in, allowing the rest of the program to keep running smoothly without freezing.

Async functions always return promises, so understanding promises is essential to use async/await effectively.

Proper error handling with try/catch inside async functions is crucial to avoid unhandled promise rejections and bugs.

Using Promise.all with async/await enables running multiple asynchronous tasks in parallel, improving performance.