Unexpected reserved word 'await' error in JavaScript

The “unexpected reserved word await” error is a common problem that can occur when using the ‘await’ keyword in JavaScript.

This error occurs when the ‘await’ keyword is used inside of a function that is not marked as ‘async’. In this post, we’ll take a look at two examples of how this error can occur and how to fix it.

Example 1: Using await inside a function that is not marked as async

One of the most common causes of the “unexpected reserved word await” error is trying to use the ‘await’ keyword inside a function that is not marked as ‘async’. Here’s an example of how this error can occur:

function getString() { //not marked async  // error: unexpected reserved word 'await'  const str = await Promise.resolve('hello');  return str;}

In this example, we are trying to use the ‘await’ keyword inside the ‘getString’ function to wait for a promise to resolve. However, since the ‘getString’ function is not marked as ‘async’, we are not allowed to use the ‘await’ keyword inside it.

To fix this error, we simply need to mark the function as async:

async function getString() {  const str = await Promise.resolve('hello');  return str;}

By marking the function as ‘async’, we are telling the JavaScript runtime that we will be using the ‘await’ keyword inside the function and that it should wait for the promise to resolve before executing the rest of the code.

Example 2: Using await inside a callback function

Another common cause of the “unexpected reserved word await” error is forgetting to set an inner function as ‘async’, such as the ones we pass to methods like forEach(), map(), etc.

[Fixed]: Cannot find module ‘react’ Error in TypeScript

In this example, we’ve marked the ‘loopThrough’ function as ‘async’, but we’re using the await keyword inside of the function we passed to the ‘forEach’ method:

async function loopThrough() {  ['a', 'b', 'c'].forEach(str => {    // unexpected reserved word 'await'    await Promise.resolve(str);  });}

In this case, the forEach method is expecting a callback function that does not return a value (i.e., a “void” function).

However, we are trying to use the ‘await’ keyword inside the callback function, which means that the callback function will return a promise. This is not allowed and will result in the “unexpected reserved word await” error.

To fix this error, we simply need to mark the callback function as async:

function loopThrough() {  ['a', 'b', 'c'].forEach(async str => {    await Promise.resolve(str);  });}

By marking the callback function as async, we are telling the JavaScript runtime that it is allowed to use the ‘await’ keyword inside the callback function.

This allows us to write asynchronous code that waits for promises to resolve within the callback function, while still respecting the “void” function signature expected by the ‘forEach’ method.

Using top-level await in a browser or Node.js environment

If you’re trying to use the ‘await’ keyword at the top level (i.e., outside of any function), you’ll need to set the type attribute to the module in your package.json file if you’re using Node.js or set the attribute in a script tag in the browser.

Using top-level await in a browser environment

To use top-level await in a browser environment, set the type attribute to the module in your script tag:

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

Now you can use top-level await in your code, like this:

console.log(await Promise.resolve(10));

Using top-level await in a Node.js environment

To use top-level await in a Node.js environment, follow these steps:

1. Create a package.json file if you don’t have one already:

npm init -y

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

{  "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.

Conclusion

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 containing function as async by adding the async keyword before the function definition.