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.

Practice

1. What does the async keyword do when placed before a function in JavaScript?

easy

A. It converts the function into a synchronous blocking call.

B. It makes the function run faster by using multiple CPU cores.

C. It automatically retries the function if it fails.

D. It makes the function return a promise and allows use of await inside it.

Solution

1. Step 1: Understand the role of async

   The async keyword marks a function to always return a promise.

2. Step 2: Recognize the effect on await

   Inside an async function, you can use await to pause until a promise resolves.

3. Final Answer:

   It makes the function return a promise and allows use of await inside it. -> Option D

4. Quick Check:

   async = returns promise + allows await [OK]

Hint: Async means function returns promise and can use await inside [OK]

Common Mistakes:

• Thinking async makes function run faster
• Confusing async with synchronous blocking
• Believing async retries failed calls automatically

2. Which of the following is the correct syntax to declare an async function named fetchData?

easy

A. async function fetchData() { }

B. function async fetchData() { }

C. function fetchData async() { }

D. async fetchData function() { }

Solution

1. Step 1: Recall async function declaration syntax

   The correct syntax places async before the function keyword.

2. Step 2: Check each option's order

   Only async function fetchData() { } correctly writes async function fetchData() { }.

3. Final Answer:

   async function fetchData() { } -> Option A

4. Quick Check:

   async before function keyword = correct syntax [OK]

Hint: Put async before function keyword for correct syntax [OK]

Common Mistakes:

• Placing async after function name
• Writing async inside parentheses
• Mixing order of async and function keywords

3. What will be the output of this code?

async function greet() {
  return 'Hello';
}

greet().then(console.log);

medium

A. Promise { 'Hello' }

B. Hello

C. undefined

D. SyntaxError

Solution

1. Step 1: Understand async function return value

   An async function always returns a promise that resolves to the returned value.

2. Step 2: Analyze the .then usage

   The then method receives the resolved value 'Hello' and logs it.

3. Final Answer:

   Hello -> Option B

4. Quick Check:

   Async function returns promise, .then logs resolved value [OK]

Hint: Async returns promise; .then logs resolved value [OK]

Common Mistakes:

• Expecting direct string without .then
• Confusing promise object with resolved value
• Thinking async function returns undefined

4. Identify the error in this async function:

async function load() {
  const data = await fetch('url');
  return data.json;
}

medium

A. fetch should not be awaited

B. Cannot use await inside async function

C. Missing parentheses after json to call the method

D. async keyword is misplaced

Solution

1. Step 1: Check usage of await and fetch

   Using await fetch('url') is correct inside async function.

2. Step 2: Inspect return statement

   data.json is a function and needs parentheses: data.json().

3. Final Answer:

   Missing parentheses after json to call the method -> Option C

4. Quick Check:

   Call json() method with parentheses [OK]

Hint: Remember to call json() with parentheses after await fetch [OK]

Common Mistakes:

• Forgetting parentheses on json method
• Thinking await can't be used inside async
• Misplacing async keyword

5. You want to write an async function processData that fetches JSON from a URL and returns the value of the name property. Which code correctly does this?

hard

A. async function processData(url) {
const response = await fetch(url);
const data = await response.json();
return data.name;
}

B. async function processData(url) {
const response = fetch(url);
const data = response.json();
return data.name;
}

C. function processData(url) {
const response = await fetch(url);
const data = await response.json();
return data.name;
}

D. async function processData(url) {
const response = await fetch(url);
const data = response.json;
return data.name;
}

Solution

1. Step 1: Confirm async function and await usage

   async function processData(url) { const response = await fetch(url); const data = await response.json(); return data.name; } correctly uses async and awaits both fetch and response.json().

2. Step 2: Check return of name property

   async function processData(url) { const response = await fetch(url); const data = await response.json(); return data.name; } returns data.name after parsing JSON, which is correct.

3. Final Answer:

   async function processData(url) { const response = await fetch(url); const data = await response.json(); return data.name; } -> Option A

4. Quick Check:

   Await fetch and json(), then return property [OK]

Hint: Await fetch and json(), then return needed property [OK]

Common Mistakes:

• Not awaiting response.json()
• Missing async keyword
• Returning json method without calling it