Why async and await are needed in Javascript - Visual Breakdown

Concept Flow - Why async and await are needed

Start

↓

Call async function

↓

Function returns Promise

↓

Use await to pause

↓

Wait for Promise to resolve

↓

Resume with resolved value

↓

Continue execution

↓

End

This flow shows how async functions return promises and await pauses execution until the promise resolves, making asynchronous code easier to write and read.

Execution Sample

Javascript

async function fetchData() {
  let data = await fetch('url');
  console.log('Data received');
}
fetchData();

This code fetches data asynchronously, waiting for the fetch to complete before logging.

Execution Table

Step	Action	Evaluation	Result
1	Call fetchData()	Returns Promise	Promise pending
2	Inside fetchData(), await fetch('url')	Pause until fetch resolves	Execution paused
3	Fetch resolves	Promise fulfilled with response	Response object
4	Resume fetchData()	Assign response to data	data = Response
5	console.log('Data received')	Print message	Output: Data received
6	fetchData() completes	Promise resolved	Execution ends

💡 fetchData() finishes after awaiting fetch and logging message

Variable Tracker

Variable	Start	After Step 4	Final
data	undefined	Response object	Response object

Key Moments - 2 Insights

Why does fetchData() return immediately even though it uses await?

Because async functions always return a Promise immediately (see Step 1), and await pauses only inside the async function without blocking the whole program.

What happens during the await fetch('url') line?

Execution inside fetchData pauses (Step 2) until the fetch Promise resolves (Step 3), then resumes with the resolved value assigned to data (Step 4).

Visual Quiz - 3 Questions

Look at the execution table, what is the state of fetchData() right after Step 1?

A It returned a pending Promise

B It is paused at await

C It has completed execution

D It threw an error

💡 Hint

Check Step 1 in the execution_table where fetchData() returns a Promise pending

At which step does the program resume execution after waiting for fetch to complete?

A Step 2

B Step 3

C Step 4

D Step 5

💡 Hint

Look at Step 4 where execution resumes and data is assigned

If we remove await, what changes in the execution table?

A fetchData() would not return a Promise

B Execution would not pause and data would be a Promise

C console.log would never run

D fetch would run synchronously

💡 Hint

Without await, data gets the Promise immediately, so no pause (compare Step 2 and 4)

Concept Snapshot

async functions always return a Promise.
await pauses execution inside async functions until the Promise resolves.
This makes asynchronous code easier to write and read.
Without await, Promises must be handled with .then() callbacks.
Using async/await avoids nested callbacks and improves clarity.

Full Transcript

This visual trace shows why async and await are needed in JavaScript. When calling an async function, it immediately returns a Promise (Step 1). Inside the async function, await pauses execution until the Promise resolves (Steps 2 and 3). Then execution resumes with the resolved value (Step 4), allowing sequential style code for asynchronous operations. This avoids complex callback chains and makes code easier to understand and maintain.