Async function syntax in Javascript - Mini Project: Build & Apply

Async function syntax

📖 Scenario: You want to fetch user data from a server and then show a greeting message. Using asynchronous functions helps you wait for the data without freezing the page.

🎯 Goal: Build a simple async function that waits for user data and then prints a greeting message.

📋 What You'll Learn

Create an async function named getUser that returns a user object after a delay.

Create a variable userId with the value 1.

Use await inside an async function to get the user data.

Print the greeting message using the user's name.

💡 Why This Matters

🌍 Real World

Async functions let web pages get data from servers without freezing or waiting, making apps smooth and fast.

💼 Career

Understanding async functions is key for web developers to handle data fetching, user interactions, and background tasks efficiently.

1

Create the async function getUser

Write an async function called getUser that returns a promise resolving to the object { id: 1, name: 'Alice' } after 1 second using setTimeout.

Javascript

// Your code here

Need a hint?

Use async function and return a new Promise that resolves after 1 second.

2

Create the userId variable

Create a variable called userId and set it to the number 1.

Javascript

async function getUser() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({ id: 1, name: 'Alice' });
        }, 1000);
    });
}

// Your code here

Need a hint?

Use const userId = 1; to create the variable.

3

Use await to get user data

Write an async function called showGreeting. Inside it, use await getUser() to get the user object and store it in a variable called user.

Javascript

async function getUser() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({ id: 1, name: 'Alice' });
        }, 1000);
    });
}

const userId = 1;

// Your code here

Need a hint?

Remember to mark showGreeting as async to use await inside it.

4

Print the greeting message

Inside the showGreeting function, add a console.log statement that prints `Hello, ${user.name}!`. Then call showGreeting() to run it.

Javascript

async function getUser() {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve({ id: 1, name: 'Alice' });
        }, 1000);
    });
}

const userId = 1;

async function showGreeting() {
    const user = await getUser();
    // Your code here
}

// Call showGreeting() below
// Your code here

Need a hint?

Use console.log(`Hello, ${user.name}!`) and call showGreeting().