Await keyword behavior in Javascript - Step-by-Step Execution

Concept Flow - Await keyword behavior

Start async function

↓

Encounter await

↓

Pause function execution

↓

Wait for Promise to resolve

↓

Resume function with resolved value

↓

Continue remaining code

↓

Function completes

The async function pauses at await until the Promise resolves, then resumes with the resolved value.

Execution Sample

Javascript

async function example() {
  console.log('Start');
  const result = await Promise.resolve('Done');
  console.log(result);
  console.log('End');
}
example();

This code logs 'Start', waits for the Promise to resolve, then logs 'Done' and 'End'.

Execution Table

Step	Action	Evaluation	Result	Output
1	Call example()	Start async function	Function starts	Start
2	Hit await Promise.resolve('Done')	Pause function	Wait for Promise	Start logged
3	Promise resolves immediately	Promise resolved with 'Done'	Resume function	No output yet
4	Assign result = 'Done'	Continue after await	result = 'Done'	No output yet
5	console.log(result)	Print resolved value	'Done'	Done
6	console.log('End')	Print final message	'End'	End
7	Function ends	No more code	Function completes	No output

💡 Function completes after all console logs run.

Variable Tracker

Variable	Start	After Step 4	Final
result	undefined	'Done'	'Done'

Key Moments - 3 Insights

Why does the 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.

Does the code after await run immediately?

No, it runs only after the Promise resolves, which you can see between steps 3 and 4 in the execution_table.

What value does the variable 'result' hold after await?

It holds the resolved value of the Promise, 'Done', as shown in variable_tracker after step 4.

Visual Quiz - 3 Questions

Look at the execution_table, what is printed immediately after calling example()?

A "Done"

B "End"

C "Start"

D Nothing is printed immediately

💡 Hint

Check step 1 in the execution_table where 'Start' is logged right after function call.

At which step does the function resume after awaiting the Promise?

A Step 4

B Step 3

C Step 2

D Step 5

💡 Hint

Look at step 4 in the execution_table where the function continues after await.

If the Promise took longer to resolve, how would the execution_table change?

A Step 5 would run before step 4

B Steps 3 and 4 would be delayed, but order stays the same

C Step 1 would be delayed

D Function would never pause

💡 Hint

Await pauses function until Promise resolves, so steps after await wait longer (see steps 2-4).

Concept Snapshot

async function example() {
  const result = await Promise;
  // code waits here until Promise resolves
  // then result holds resolved value
}

- await pauses async function
- waits for Promise to resolve
- resumes with resolved value
- code after await runs after Promise resolves

Full Transcript

This visual trace shows how the await keyword works inside an async function in JavaScript. When the function example() is called, it starts and logs 'Start'. At the await line, the function pauses and waits for the Promise to resolve. Once the Promise resolves with 'Done', the function resumes, assigns 'Done' to the variable result, then logs 'Done' and 'End'. The function then completes. Variables like result change only after the Promise resolves. This step-by-step flow helps understand how await pauses and resumes async functions.