Await keyword behavior in Javascript - Mini Project: Build & Apply

Await Keyword Behavior

📖 Scenario: Imagine you are building a simple web app that fetches user data from a server. You want to learn how to wait for the data to arrive before using it.

🎯 Goal: You will create a function that simulates fetching data asynchronously and use the await keyword to wait for the data before printing it.

📋 What You'll Learn

Create an asynchronous function called fetchUserData that returns a promise resolving to the string 'User data loaded' after 1 second.

Create an asynchronous function called showUserData.

Inside showUserData, use await to wait for fetchUserData to complete and store the result in a variable called data.

Print the value of data using console.log.

💡 Why This Matters

🌍 Real World

Waiting for data from servers or APIs is common in web apps. Using <code>await</code> helps write clear code that waits for data before continuing.

💼 Career

Understanding <code>async</code> and <code>await</code> is essential for frontend and backend developers working with asynchronous data fetching.

1

Create the asynchronous function fetchUserData

Write an asynchronous function called fetchUserData that returns a promise which resolves to the string 'User data loaded' after 1 second using setTimeout.

Javascript

// Your code here

Hint

Use new Promise inside the async function and setTimeout to delay the resolve by 1000 milliseconds.

2

Create the asynchronous function showUserData

Write an asynchronous function called showUserData that will later use await to get data.

Javascript

async function fetchUserData() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('User data loaded');
        }, 1000);
    });
}

// Your code here

Hint

Just create the function with the async keyword and empty body for now.

3

Use await inside showUserData to get data

Inside the showUserData function, use await to wait for fetchUserData() and store the result in a variable called data.

Javascript

async function fetchUserData() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('User data loaded');
        }, 1000);
    });
}

async function showUserData() {
    // Use await to get data here
    // Your code here
}

Hint

Use const data = await fetchUserData(); inside the function body.

4

Print the awaited data using console.log

Add a line inside showUserData to print the variable data using console.log. Then call showUserData() to run the code.

Javascript

async function fetchUserData() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve('User data loaded');
        }, 1000);
    });
}

async function showUserData() {
    const data = await fetchUserData();
    // Print data here
    // Your code here
}

// Call the function to see output
// Your code here

Hint

Use console.log(data); inside showUserData and call showUserData(); after the function.

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