Solve - Unexpected reserved word 'await' Error in JS

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

banner

Photo by Noah Silliman

Solve - Unexpected reserved word 'await' Error #

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
function getString() { // 👈️ not marked async // ⛔️ unexpected reserved word 'await' const str = await Promise.resolve('hello'); return str; } // ⛔️ unexpected reserved word 'await' const result = await Promise.resolve(42); // 👈️ top-level await

Because we didn't declare the getString function as async we are not able to use the await keyword in it. Instead we should set the function as async.

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

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() { ['a', 'b', 'c'].forEach(str => { // ⛔️ 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 forEach method.

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

index.js
function loopThrough() { ['a', 'b', 'c'].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.

If you're trying to use the await keyword on the top level, make sure you set the type attribute to module in your package.json file if you're using node.js or set the attribute in a script tag on the browser.

If you're on the browser, 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(10));

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

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

shell
npm 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.

Use the search field on my Home Page to filter through my more than 1,000 articles.