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.

Practice

1. What does the await keyword do in JavaScript?

easy

A. Makes a function synchronous

B. Pauses the execution until a Promise resolves

C. Creates a new Promise

D. Throws an error if used outside a function

Solution

1. Step 1: Understand the role of await

   The await keyword pauses the execution of an async function until the Promise it waits for settles (resolves or rejects).

2. Step 2: Differentiate from other options

   await does not make a function synchronous or create a Promise; it only pauses execution inside async functions.

3. Final Answer:

   Pauses the execution until a Promise resolves -> Option B

4. Quick Check:

   await pauses execution [OK]

Hint: Remember: await pauses until Promise finishes [OK]

Common Mistakes:

• Thinking await makes functions synchronous
• Believing await creates Promises
• Using await outside async functions without error

2. Which of the following is the correct way to use await in JavaScript?

easy

A. const result = fetchData(); await;

B. await const result = fetchData();

C. const result = fetchData() await;

D. const result = await fetchData();

Solution

1. Step 1: Check correct syntax for await

   The correct syntax places await before the Promise-returning function call, like await fetchData().

2. Step 2: Identify invalid syntax

   Options A, B, and C misuse await placement, causing syntax errors.

3. Final Answer:

   const result = await fetchData(); -> Option D

4. Quick Check:

   await goes before the Promise call [OK]

Hint: Put await right before the Promise call [OK]

Common Mistakes:

• Placing await after the function call
• Trying to declare variables with await keyword
• Adding await as a separate statement

3. What will be the output of this code?

async function test() {
  const p = new Promise(resolve => setTimeout(() => resolve('Done'), 100));
  const result = await p;
  console.log(result);
}
test();

medium

A. Done

B. Promise { <pending> }

C. undefined

D. Error: await used outside async function

Solution

1. Step 1: Understand the Promise and await

   The Promise resolves after 100ms with the string 'Done'. The await pauses until this resolution.

2. Step 2: Check console.log output

   After awaiting, result holds 'Done', so console.log(result) prints 'Done'.

3. Final Answer:

   Done -> Option A

4. Quick Check:

   Await waits for Promise result [OK]

Hint: Await unwraps Promise value before logging [OK]

Common Mistakes:

• Expecting Promise object instead of resolved value
• Confusing async function call with synchronous
• Thinking await causes errors outside async

4. Identify the error in this code snippet:

function fetchData() {
  return new Promise(resolve => setTimeout(() => resolve('Data'), 50));
}
const data = await fetchData();
console.log(data);

medium

A. Missing async keyword before function

B. Promise never resolves

C. Cannot use await outside async function

D. Syntax error in Promise constructor

Solution

1. Step 1: Check where await is used

   await is used at the top level, outside any async function, which is not allowed in standard JavaScript.

2. Step 2: Identify correct error cause

   This causes a runtime syntax error because await must be inside an async function.

3. Final Answer:

   Cannot use await outside async function -> Option C

4. Quick Check:

   Await only inside async functions [OK]

Hint: Use await only inside async functions [OK]

Common Mistakes:

• Assuming await works globally
• Thinking async keyword is needed on fetchData only
• Believing Promise never resolves

5. You want to fetch user data and then fetch posts by that user sequentially using async/await. Which code correctly ensures the posts are fetched only after user data is available?

async function getUserAndPosts() {
  const user = await fetchUser();
  const posts = fetchPosts(user.id);
  return posts;
}

hard

A. Add await before fetchPosts: const posts = await fetchPosts(user.id);

B. Remove await from fetchUser to run both in parallel

C. Return posts without awaiting to speed up

D. Use Promise.all with fetchUser and fetchPosts

Solution

1. Step 1: Analyze the sequence requirement

   Posts must be fetched only after user data is ready, so fetchPosts must wait for user.

2. Step 2: Check code for awaiting posts

   Currently, fetchPosts is called without await, so it returns a Promise immediately without waiting.

3. Step 3: Correct usage

   Adding await before fetchPosts ensures posts are fetched after user data is available.

4. Final Answer:

   Add await before fetchPosts: const posts = await fetchPosts(user.id); -> Option A

5. Quick Check:

   Await each dependent async call [OK]

Hint: Await each async call that depends on previous result [OK]

Common Mistakes:

• Not awaiting dependent async calls
• Trying to run dependent calls in parallel
• Using Promise.all incorrectly for sequential tasks