Syntaxerror unexpected reserved word await [SOLVED]

Are you struggling to fix the syntaxerror unexpected reserved word await error message in JavaScript?

In this article, we’ll walk you through how you can easily resolve this error.

But before we get into the solutions, let’s first understand why unexpected reserved word await occur in JavaScript.

If you understand this error thoroughly, it is easy for you to fix the syntaxerror unexpected strict mode reserved word ‘await’ error message.

What is “syntaxerror: unexpected reserved word ‘await'”?

The error message syntaxerror unexpected reserved word await occurs when you are trying to use the ‘await ‘keyword inside of a function, but it is not marked as async.

For example:

function getString() {
  const str = await Promise.resolve('Hi, welcome to Itsoutcecode!');
  return str;
}

As you can see, the await keyword is used inside the getString function, which is not marked as async. This will result in a SyntaxError: Unexpected reserved word ‘await’ error.

In simple understanding, await is a keyword that can only be used inside a function that has been marked as async.

If you try to use await inside a function that is not marked as async, you will get the SyntaxError message indicating that unexpected reserved word ‘await’.

What is the async keyword?

The async keyword is used to define functions that can utilize “await” to wait for promises to resolve. The async keyword can be placed before a function.

In addition to that, the word async before a function means one simple thing: a function always returns a promise. Other values are wrapped in a resolved promise automatically.

What is the “await” keyword?

The await keyword makes JavaScript wait until that promise settles and returns its result.

It literally suspends the function execution until the promise settles and then resumes it with the promise result.

What is “await” keyword?

The await keyword makes JavaScript wait until that promise settles and returns its result.

It literally suspends the function execution until the promise settles, and then resumes it with the promise result.

Why does the “unexpected reserved word await” SyntaxError occur?

The syntaxerror unexpected reserved word ‘await’ error occurs when you mistakenly use the await keyword outside of an async function in JavaScript.

This error happens because the await keyword is specifically designed to be used within functions that are meant to handle promises in a synchronous way.

In simpler terms, when you use await in JavaScript, it pauses the execution of the function until a promise is either fulfilled or rejected.

This allows you to write code that deals with asynchronous operations in a more straightforward and sequential manner.

However, it’s important to remember that you can only use the “await” keyword inside functions that are explicitly declared as “async”.

What are the root causes of “syntaxerror: unexpected reserved word ‘await'”?

Here are some of the common causes of the unexpected reserved word await that can help us avoid making similar mistakes in your code:

👉 If you try to use the await keyword outside of an async function, an error will occur. To avoid this error, always make sure that the function where you want to use await is declared with the async keyword.

👉 The await keyword should be used before an expression that returns a promise. Placing it anywhere else will result in a syntax error. Double-check the placement of await to ensure it is used correctly.

👉 Using the await keyword within a regular (non-async) function will result in an error. Make sure to only use await within functions declared with the async keyword.

👉 Using await on a non-promise value will also trigger a syntax error. Verify that the awaited expression returns a promise.

👉 The async/await syntax was introduced in ECMAScript 2017 (ES8). Older browsers or environments that do not support this syntax may throw the Syntaxerror Unexpected Reserved Word Await error.

Ensure that your environment supports the async/await syntax or consider using transpilers like Babel to convert your code to an older version of JavaScript.

How to fix the “syntaxerror unexpected reserved word await”?

To fix the SyntaxError: Unexpected reserved word ‘await’ error, ensure that you only use the await keyword within a function that is declared as async.

If you have a function that uses await but doesn’t have the async keyword, you can fix the error by adding async before the function keyword like this:

async function myFunction() {
  const result = await someAsyncOperation();
  // ...
}

Here are the following solutions that can help you to resolve the error.

Solution 1: Add the async keyword to the function that uses await

async function getString() {
  const str = await Promise.resolve('Hi, welcome to Itsourcecode!');
  return str;
}

async function main() {
  const result = await getString();
  console.log(result);
}

main();

By adding the async keyword before the function keyword to mark the function as async. This allows us to use the await keyword inside the function without getting an error.

Output:

Hi, welcome to Itsourcecode!

Solution 2: Resolving unexpected reserved word ;await’ error in nested function

For example:

async function loopThrough() {
  ['itsource', 'code', 'com'].forEach(str => {
    await Promise.resolve(str);
  });
}

If you’re using the await keyword, you probably already know that it must be inside an async function.

What might have happened is that your nested functions if accidentally forgot to add the async modifier to the innermost function that contains the await keyword.

Definitely, you’ll face an error message. Remember that in order to use the await keyword, you need to make sure that the immediate surrounding function is marked as async.

Corrected code:

function loopThrough() {
  ['itsource', 'code', 'com'].forEach(async str => {
    await Promise.resolve(str);
  });
}

As you can see, 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.

Solution 3: Use await at top level

If you want to use the await keyword at the top level of your file, you will need to include the type attribute as a module in the script tag that references the file in your HTML.

This approach is effective when your code is running in web browser environments.

For example:

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

Now you can use the await at the global scope in your file.

console.log(await Promise.resolve('Hi, welcome to Itsourcecode!'));

When you are using Node.js, make sure to set the type attribute as module in your package.json file.

package.json

{
"name": "cb-js",
"type": "module",
// other fields…
}

When you don’t have a package.json file in your project directory, you can create one using the following command:

npm init -y

yarn init -y

Conclusion

In conclusion, the error message syntaxerror unexpected reserved word await occurs when you are trying to use the ‘await ‘keyword inside of a function, but it is not marked as async.

To fix the error, ensure that you only use the await keyword within a function that is declared as async.

This article already discussed what this error is all about and multiple ways to resolve this error.

By executing the solutions above, you can master this SyntaxError with the help of this guide.

You could also check out other SyntaxError articles that may help you in the future if you encounter them.

We are hoping that this article helps you fix the error. Thank you for reading itsourcecoders 😊