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.