How can I use async/await at the top level?

Cover Image for How can I use async/await at the top level?
Matheus Mello
Matheus Mello
published a few days ago. updated a few hours ago

How to Use async/await at the Top Level in JavaScript

Welcome to my tech blog, where I break down complex coding problems into digestible pieces! 🚀 Today, we're going to tackle the common issue of using async/await at the top level in JavaScript.

One of my readers sent in a question, and it goes like this:

"I have been experimenting with async/await, and I can't seem to figure out why my code doesn't work as expected. Could you shed some light on the matter?"

Of course, my friend! Let's dive right in and look at the code snippet provided:

async function main() {  
    var value = await Promise.resolve('Hey there');
    console.log('inside: ' + value);
    return value;
}

var text = main();  
console.log('outside: ' + text);

When you run this code, you'll notice that the console output is not what you expected. It looks like this:

> outside: [object Promise]
> inside: Hey there

Now, let's break it down step by step.

Understanding the Issue

The issue here is that main() is an asynchronous function. When you call it, it returns a promise. In this case, the value of text is a promise object, not the resolved value of the promise.

So, the console.log('outside: ' + text) statement is executed immediately after calling main(), which is why you see [object Promise] instead of the expected value of 'Hey there'.

The Solution: Using an Immediately Invoked Function Expression (IIFE)

To access the resolved value of the promise without using .then(), you can wrap your code inside an immediately invoked function expression (IIFE). Here's how you can modify your code:

(async () => {
    var value = await Promise.resolve('Hey there');
    console.log('inside: ' + value);
    return value;
})();

By wrapping the async/await code inside the IIFE, you ensure that it is immediately executed. This way, you can access the resolved value directly, without assigning it to a variable.

Putting It All Together

Let's go back to our original code snippet and modify it using an IIFE:

(async () => {
    var value = await Promise.resolve('Hey there');
    console.log('inside: ' + value);
    return value;
})();

Now, when you run the code, you'll get the desired output:

> inside: Hey there

Conclusion

Congratulations on making it through! 🎉 We've successfully tackled the issue of using async/await at the top level in JavaScript. Remember to use an IIFE to immediately invoke your asynchronous code and access the resolved value without using .then().

I hope you found this guide helpful! If you have any more questions or need further clarification, feel free to leave a comment below. Happy coding! 💻


More Stories

Cover Image for How can I echo a newline in a batch file?

How can I echo a newline in a batch file?

updated a few hours ago
batch-filenewlinewindows

🔥 💻 🆒 Title: "Getting a Fresh Start: How to Echo a Newline in a Batch File" Introduction: Hey there, tech enthusiasts! Have you ever found yourself in a sticky situation with your batch file output? We've got your back! In this exciting blog post, we

Matheus Mello
Matheus Mello
Cover Image for How do I run Redis on Windows?

How do I run Redis on Windows?

updated a few hours ago
rediswindows

# Running Redis on Windows: Easy Solutions for Redis Enthusiasts! 🚀 Redis is a powerful and popular in-memory data structure store that offers blazing-fast performance and versatility. However, if you're a Windows user, you might have stumbled upon the c

Matheus Mello
Matheus Mello
Cover Image for Best way to strip punctuation from a string

Best way to strip punctuation from a string

updated a few hours ago
punctuationpythonstring

# The Art of Stripping Punctuation: Simplifying Your Strings 💥✂️ Are you tired of dealing with pesky punctuation marks that cause chaos in your strings? Have no fear, for we have a solution that will strip those buggers away and leave your texts clean an

Matheus Mello
Matheus Mello
Cover Image for Purge or recreate a Ruby on Rails database

Purge or recreate a Ruby on Rails database

updated a few hours ago
rakeruby-on-railsruby-on-rails-3

# Purge or Recreate a Ruby on Rails Database: A Simple Guide 🚀 So, you have a Ruby on Rails database that's full of data, and you're now considering deleting everything and starting from scratch. Should you purge the database or recreate it? 🤔 Well, my

Matheus Mello
Matheus Mello