If you want to use async/await inside JavaScript in general, you have to define an async function before you can use the await.

In this article, I want to show you that it is possible to finally use top-level await instead of wrapping it between an asyncfunction.

Note: The top-level _await_ is part of a stage 3 proposal for the ECMAScript spec. It may change in the future.

How Does async/await Work?

In a previous article, I wrote about the history of doing Ajax calls in the early days with XHR until now with the Fetch API.

[From XHR to Fetch With Async/Await on the Finish Line
_A look at the evolution and history of requests in JavaScript_medium.com](https://medium.com/better-programming/from-xhr-to-fetch-with-async-await-on-the-finish-line-b021de1d226b "medium.com/better-programming/from-xhr-to-f..")

Promises are an essential part of async/await. Without them, we can’t use them.

Most modern environments in JavaScript (like HTTP requests) are asynchronous, and many modern APIs returns promises.

While this has a lot of benefits in making operations non-blocking, it makes certain code for loading files or external content less readable.

fetch("...")
.then(response => response.json())
.then(data => { console.log(data) });

People are used to using promises in JavaScript with a async function to use await.

But this will execute the function right after the definition, which feels weird. It’s missing the point of using a function.

I’ve gathered a couple of aspiring developers around the world on a Discord server, feel free if you like to join in.

Top-Level await

It would be better to use await without wrapping it in an async function.

With the release of TypeScript 3.8, we received this feature. Take into account that it’s only supported natively in Chrome.

To use it, we have to create a module. It’s a module when it is exporting something via export.

const response = await fetch("...");
const data = await response.json();
console.log(data);

export {};

If you ask me, this code is much more readable. Because we don’t have to create an async function, it also saves a bit of code.

Read more about JavaScript modules at MDN Web Docs.

TypeScript Configuration

To use top-level await in TypeScript, you have to set the target compiler option to es2017 or higher. The module option has to be set to esnext or system.

Conclusion

I think it’s awesome that the TypeScript team has built top-level await into the language.

What do you think? Are you going to use it? Please let me know in the comments.

Originally posted on ByRayRay.dev

Join my newsletter “Developer Underdogs” and get a weekly edition with the best developer content created by aspiring developers that you may not know.

Read more

[Use CLI tools From Mac/Linux On Windows Subsystem for Linux
_WSL2 is so powerful to make the switch from Mac a breeze._medium.com](https://medium.com/dev-together/use-cli-tools-from-mac-linux-on-windows-subsystem-for-linux-37d16f012489 "medium.com/dev-together/use-cli-tools-from-..")

[3 Todo’s Before Applying For A Junior Developer Job
_I’ve seen a lot of job applications from junior developers. Most of the applications are made with the best intentions…_medium.com](https://medium.com/dev-together/3-todos-before-applying-for-a-junior-developer-job-26fc0d8ba2b9 "medium.com/dev-together/3-todos-before-appl..")

[Why Tutorials Won’t Make You a Professional Developer
_Mastery comes from more than doing tutorials. Try, fail, learn, repeat!_medium.com](https://medium.com/better-programming/why-tutorials-wont-make-you-a-professional-developer-271108c74ddb "medium.com/better-programming/why-tutorials..")

[Tips to Create Developer Tutorials
_Want to write more tutorials but you aren’t sure where to start? Start here_medium.com](https://medium.com/better-programming/tips-to-create-developer-tutorials-62cb3a25b8e5 "medium.com/better-programming/tips-to-creat..")