SyntaxError: Unexpected reserved word 'await' in JS [Fixed]

avatar
Borislav Hadzhiev

2 min

banner

# Unexpected reserved word 'await' error in JavaScript

The "unexpected reserved word await" error occurs when the await keyword is used inside of a function that was not marked as async.

To use the await keyword inside of a function, mark the directly enclosing function as async.

unexpected reserved word await

Here are 2 examples of how the error occurs.

index.js
// ๐Ÿ‘‡๏ธ not marked as async function getString() { // โ›”๏ธ SyntaxError: unexpected reserved word 'await' const str = await Promise.resolve('Bobby Hadz'); return str; } // ---------------------------------------------------------- // โ›”๏ธ unexpected reserved word 'await' const result = await Promise.resolve(42); // ๐Ÿ‘ˆ๏ธ top-level await

# Mark the directly enclosing function as async to use await

We didn't declare the getString function as async, so we aren't able to use the await keyword in it.

Instead, we should mark the function as async.

index.js
// โœ… mark the function as async async function getString() { const str = await Promise.resolve('Bobby Hadz'); return str; }

The function is marked as async, so we can use the await keyword in it.

# Solving the error in nested functions

A very common cause of the error is forgetting to set an inner function as async, e.g. the ones we pass to methods like forEach(), map(), etc.

Keep in mind that the directly enclosing function has to be marked as async for you to be able to use the await keyword.

index.js
async function loopThrough() { ['bobby', 'hadz', 'com'].forEach(str => { // โ›”๏ธ SyntaxError: unexpected reserved word 'await' await Promise.resolve(str); }); }

We marked the loopThrough function as async, however, we're using the await keyword inside of the function we passed to the Array.forEach() method.

Instead, we should have marked the function we passed to forEach as async.

index.js
// โœ… marked the correct function as async function loopThrough() { ['bobby', 'hadz', 'com'].forEach(async str => { await Promise.resolve(str); }); }

We declared the function we passed to the forEach method as async, therefore we are able to use the await keyword in it.

The directly enclosing function has to be marked async for us to be able to use the await keyword.

# Using the await keyword at the top-level

If you're trying to use the await keyword at the top level, make sure to:

  • set the type attribute to module in your package.json file if you're using node.js.
  • set the attribute in a script tag if in a browser environment.

If you're in a browser environment, set the type attribute to module in your script tag to be able to use top-level await.

index.html
<script type="module" src="index.js"></script>

Now you can use top-level await in your code, e.g.

index.js
console.log(await Promise.resolve('Bobby Hadz'));

And here's how to use top-level await in Node.js.

Create package.json file if you don't have one already:

shell
# ๐Ÿ‘‡๏ธ with NPM npm init -y # ๐Ÿ‘‡๏ธ with YARN yarn init -y

Add the type property and set it to module in your package.json file.

package.json
{ "type": "module", "name": "javascript", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC" }

Now you can use top-level await in your Node.js code.

I've also written an article on how to access the value of a Promise.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.

Copyright ยฉ 2023 Borislav Hadzhiev