In modern JavaScript and TypeScript programming, the use of async and await has become commonplace for dealing with asynchronous code in a more readable and maintainable manner. They provide a clear and concise way to handle promises and represent significant syntax improvements over older methods like callbacks and .then() chaining. However, a common pitfall or area of misunderstanding pertains to the correct usage of await . Specifically, the restriction that await must be used within an async function is something developers frequently encounter. Let’s dive into the technical details and the rationale behind this requirement.

Technical Explanation

Understanding async

and await

Before understanding why await cannot be used outside of async functions, let's revisit both keywords:

• async : This keyword, when prefixed to a function, signifies that the function will operate asynchronously. It automatically returns a promise and allows the use of await within it.
• await : This keyword is used to pause the execution of an async function until a promise is settled (fulfilled or rejected). At this point, it extracts the resolved value from the promise or throws an error if the promise is rejected.

Why await

Cannot Be Used Outside async

At its core, await needs a context provided by an async function because it's essentially syntactic sugar for promise handling. The JavaScript engine requires an async function to convert operations with await into a promise-based approach under the hood. If await were allowed outside an async function:

1. Context: JavaScript wouldn't know how to handle the await because there is no async function management to resolve the promise lifecycle.
2. Blocking Nature: The essence of await is to make asynchronous operations appear synchronous inside an async function without blocking the main thread. Outside of this context, JavaScript’s single-threaded nature offers no mechanism to halt execution without potentially leading to performance issues.

Common Error

Running code with await outside of async leads to a syntax error:

• The fetchData function is declared as an async function.
• The await keyword is used within fetchData to halt until the promise returned by fetch and response.json() are resolved.