[Bug]: Parser can't parse "for await (async of []);"

[Zalathar]

💻

• Would you like to work on a fix?

How are you using Babel?

Programmatic API (babel.transform, babel.parse)

Input code

async function f() {
    for await (async of []);
}

Babel REPL

Configuration file name

No response

Configuration

{}

Current and expected behavior

Expected:

• The parser parses a for await statement with the identifier async as its left-hand-side.

Actual:

/repl.js: Unexpected token, expected "=>" (2:22)

  1 | async function f() {
> 2 |   for await (async of []);
    |                       ^
  3 | }

Environment

• Babel 7.14.0
• Current Babel main (b99c4f0)

Possible solution

After for await ( not followed by var/let/const, the ECMAScript grammar requires a LeftHandExpression followed by of.

Babel instead parses an arbitrary expression, and then checks that the expression can be converted to a left-hand-side. This mostly works, except that when the next two tokens are async of the expression parser sees them as the start of an async arrow function with parameter of (which is not a LeftHandExpression).

The solution I currently have in mind is to explicitly look ahead for async of after the for await (, and parse the left-hand-side as an identifier instead of an expression. That will fix this edge-case, and the existing approach of parsing an expression should remain viable in all other cases for now.

Additional context

#13208
prettier/prettier#10781 (review)

[babel-bot]

Hey @Zalathar! We really appreciate you taking the time to report an issue. The collaborators on this project attempt to help as many people as possible, but we're a limited number of volunteers, so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack community that typically always has someone willing to help. You can sign-up here for an invite."

[JLHwung]

The error 'Unexpected token, expected "=>"' is thrown because Babel is parsing async of as the start of an UnaryAsyncArrowExpression async of => {}:

babel/packages/babel-parser/src/parser/expression.js

Line 1229 in b99c4f0

this.expect(tt.arrow);

which is called in

babel/packages/babel-parser/src/parser/expression.js

Line 1035 in b99c4f0

return this.parseAsyncArrowUnaryFunction(id);

We can guard it with an extra => lookahead so the async here will be eventually returned as an Identifier. We can either check if lookahead().type is tt.arrow, like V8 does, or we simply check if lookaheadCharCode() is =, I guess the latter approach is sufficient. It is also more performant than the former approach because it does not clone the tokenizer state, since async var => {} is more popular than (async of []), so the lookahead will be executed with high probability.

Note that unlike for await, for (async of []) is forbidden . Although Babel current throws, it is thrown because Babel is parsing async of [] as arrow function like I mentioned before. When we add the extra lookahead, we should specifically throw for for (async of []).