Why async and await are needed in Javascript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this code using async/await?

Look at this JavaScript code using async and await. What will it print?

Javascript

async function fetchData() {
  return 'data loaded';
}

async function main() {
  const result = await fetchData();
  console.log(result);
}

main();

A SyntaxError

B Promise { 'data loaded' }

C undefined

D data loaded

💡 Hint

Remember that await pauses until the promise resolves and returns the resolved value.

The fetchData function returns a promise that resolves to 'data loaded'. Using await inside main waits for that promise to resolve and assigns the resolved value to result. So, console.log(result) prints 'data loaded'.

❓ Predict Output

intermediate

What happens without await in async function?

What will this code print?

Javascript

async function fetchData() {
  return 'hello';
}

async function main() {
  const result = fetchData();
  console.log(result);
}

main();

A Promise { 'hello' }

B hello

C undefined

D TypeError

💡 Hint

Without await, the function returns a promise immediately.

The fetchData function is async and returns a promise. Without await, result is the promise itself, not its resolved value. So, console.log(result) prints the promise object.

🧠 Conceptual

advanced

Why do we need async and await in JavaScript?

Which of these best explains why async and await are needed in JavaScript?

A To write asynchronous code that looks and behaves like synchronous code, making it easier to read and maintain.

B To make all functions run faster by using multiple CPU cores automatically.

C To replace all callback functions with synchronous blocking calls.

D To allow JavaScript to run outside the browser.

💡 Hint

Think about how async/await helps with code readability and flow.

async and await let us write asynchronous code that looks like normal synchronous code. This makes it easier to understand and maintain, especially when dealing with operations like fetching data or waiting for timers.

❓ Predict Output

advanced

What is the output order of this async code?

What will this code print, and in what order?

Javascript

console.log('Start');

async function task() {
  console.log('Inside async');
  return 'Done';
}

task().then(result => console.log(result));

console.log('End');

A Start<br>Done<br>Inside async<br>End

B Start<br>End<br>Inside async<br>Done

C Start<br>Inside async<br>End<br>Done

D Start<br>Inside async<br>Done<br>End

💡 Hint

Remember that the body of an async function runs immediately until the first await or return.

console.log('Start') runs first. Then task() is called, which immediately logs 'Inside async'. The function returns a resolved promise with 'Done'. Meanwhile, console.log('End') runs. Finally, the then callback logs 'Done'. So the order is Start, Inside async, End, Done.

🧠 Conceptual

expert

What problem does async/await solve compared to callbacks?

Which statement best describes the main problem that async and await solve compared to traditional callbacks?

A They automatically parallelize all asynchronous operations without developer control.

B They prevent callback hell by making asynchronous code easier to write and understand.

C They make asynchronous code run synchronously, blocking the main thread.

D They eliminate the need for promises entirely.

💡 Hint

Think about how callback nesting can get complicated.

Callbacks often lead to deeply nested code called 'callback hell'. async and await let us write asynchronous code in a flat, readable style, avoiding this problem. They still use promises under the hood and do not block the main thread.

Practice

1. Why do we use async and await in JavaScript?

easy

A. To make the code run faster by skipping steps

B. To handle slow tasks without freezing the program

C. To write code that only works in old browsers

D. To stop the program completely until a task finishes

Solution

1. Step 1: Understand the problem with slow tasks

   Slow tasks like fetching data can freeze the program if handled synchronously.

2. Step 2: Role of async and await

   Async and await let the program wait for slow tasks without freezing, keeping it smooth.

3. Final Answer:

   To handle slow tasks without freezing the program -> Option B

4. Quick Check:

   Async/await = smooth waiting [OK]

Hint: Async/await = smooth waiting without freezing [OK]

Common Mistakes:

• Thinking async/await makes code faster
• Believing async/await stops the whole program
• Confusing async/await with old browser code

2. Which of the following is the correct way to declare an async function in JavaScript?

easy

A. function async fetchData() {}

B. function fetchData() async {}

C. async function fetchData() {}

D. function fetchData async() {}

Solution

1. Step 1: Recall async function syntax

   The correct syntax places async before the function keyword.

2. Step 2: Check each option

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

3. Final Answer:

   async function fetchData() {} -> Option C

4. Quick Check:

   Async before function keyword [OK]

Hint: Async keyword goes before function name [OK]

Common Mistakes:

• Placing async after function name
• Adding async inside function parentheses
• Writing async after function body

3. What will be the output of this code?

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

greet().then(console.log);

medium

A. 'Hello'

B. Promise { 'Hello' }

C. undefined

D. Error: greet is not a function

Solution

1. Step 1: Understand async function return

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

2. Step 2: Using .then to get value

   The .then(console.log) prints the resolved value 'Hello'.

3. Final Answer:

   'Hello' -> Option A

4. Quick Check:

   Async function returns Promise, .then logs value [OK]

Hint: Async returns Promise; .then gets resolved value [OK]

Common Mistakes:

• Expecting direct string without .then
• Confusing Promise object with string
• Thinking async function returns undefined

4. Find the error in this code:

async function fetchData() {
  const data = await fetch('https://api.example.com');
  return data.json();
}

const result = fetchData();
console.log(result);

medium

A. data.json() is not a function

B. fetchData() should not be async

C. Cannot use await inside async function

D. Missing await before fetchData() call

Solution

1. Step 1: Check fetchData() call

   fetchData() returns a Promise, so logging it directly shows a Promise object.

2. Step 2: Fix by awaiting fetchData()

   Adding await before fetchData() inside an async context gets the resolved data.

3. Final Answer:

   Missing await before fetchData() call -> Option D

4. Quick Check:

   Await needed to get Promise result [OK]

Hint: Await async calls to get actual result [OK]

Common Mistakes:

• Logging Promise instead of awaited value
• Removing async keyword incorrectly
• Misunderstanding data.json() usage

5. You want to fetch user data and then fetch posts by that user. Which code correctly uses async/await to do this step-by-step without freezing the program?

function getUser() {
  return fetch('/user').then(res => res.json());
}

function getPosts(userId) {
  return fetch(`/posts?user=${userId}`).then(res => res.json());
}

// Fill in the blanks
async function loadData() {
  const user = _____ getUser();
  const posts = _____ getPosts(user.id);
  console.log(posts);
}

hard

A. await, await

B. await, then

C. then, await

D. then, then

Solution

1. Step 1: Understand async function usage

   Inside async functions, use await to wait for Promises step-by-step.

2. Step 2: Apply await to both calls

   Both getUser() and getPosts() return Promises, so both need await.

3. Final Answer:

   await, await -> Option A

4. Quick Check:

   Use await for sequential async calls [OK]

Hint: Use await for each async call inside async function [OK]

Common Mistakes:

• Mixing then and await inside async function
• Forgetting await causing Promise logs
• Using then without returning inside async