Async function syntax in Javascript - Step-by-Step Execution

Concept Flow - Async function syntax

Call async function

↓

Function starts running

↓

Encounter await?

No→Run next line

Yes↓

Pause function, wait for Promise

↓

Promise resolves

↓

Resume function after await

↓

Return value wrapped in Promise

↓

Caller can use .then or await

This flow shows how an async function runs, pauses at await to wait for a Promise, then resumes and returns a Promise.

Execution Sample

Javascript

async function greet() {
  const message = await Promise.resolve('Hello!');
  return message;
}
greet().then(console.log);

This code defines an async function that waits for a resolved Promise and then logs the message.

Execution Table

Step	Action	Evaluation	Result
1	Call greet()	Start async function	Function starts running
2	Execute await Promise.resolve('Hello!')	Pause until Promise resolves	Function pauses, waiting
3	Promise resolves	Promise value is 'Hello!'	Function resumes with message='Hello!'
4	Return message	Return 'Hello!'	Function returns Promise resolved with 'Hello!'
5	greet().then(console.log)	Receive resolved value	Logs 'Hello!' to console

💡 Function completes after returning resolved Promise with 'Hello!'

Variable Tracker

Variable	Start	After await resolves	Final
message	undefined	'Hello!'	'Hello!'

Key Moments - 3 Insights

Why does the async function pause at the await line?

Because await waits for the Promise to resolve before continuing, as shown in step 2 and 3 of the execution_table.

What does the async function return?

It always returns a Promise, even if you return a simple value inside, as shown in step 4.

How do we get the final value from an async function?

By using .then() or await on the function call, as shown in step 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'message' after the Promise resolves?

A undefined

B 'Hello!'

C Promise object

D null

💡 Hint

Check the variable_tracker row for 'message' after await resolves.

At which step does the async function pause to wait for the Promise?

A Step 2

B Step 1

C Step 4

D Step 5

💡 Hint

Look at the execution_table action describing the pause.

If we remove 'await' before Promise.resolve, what changes in the execution?

A Function pauses longer

B Function throws an error

C Function returns a Promise immediately without pausing

D Function returns undefined

💡 Hint

Recall that await causes pause; without it, the Promise is returned immediately.

Concept Snapshot

async function name() {
  const result = await somePromise;
  return result;
}
- async functions always return a Promise
- await pauses execution until the Promise resolves
- Use .then() or await to get the final value

Full Transcript

An async function in JavaScript runs like a normal function but can pause at await expressions to wait for Promises to resolve. When you call an async function, it starts running immediately. When it hits an await, it pauses and waits for the Promise to finish. After the Promise resolves, the function continues running. The async function always returns a Promise that resolves with the returned value. You get the final result by using .then() or await on the function call.