This rule raises an issue when accessing a member (property or method) directly from an await expression using parentheses.
When you access a member from an await expression, you must wrap the await in parentheses, creating code like (await
expression).property. This pattern has several problems:
Readability issues: The nested parentheses make the code harder to scan and understand quickly. Developers need to mentally parse the parentheses to understand the execution order.
Maintenance complexity: When the await expression becomes more complex, the parentheses create visual clutter that makes it difficult to identify what is being awaited versus what is being accessed.
Error-prone patterns: The parentheses requirement is easy to forget, leading to syntax errors. Even when correct, the pattern is less intuitive than alternatives.
JavaScript provides cleaner alternatives through destructuring assignment and intermediate variables that make the code more explicit and easier to follow.
This issue primarily affects code readability and maintainability. While it doesn’t cause runtime errors when written correctly, it makes code harder to understand and review, especially in complex asynchronous workflows. Poor readability can lead to bugs during maintenance and makes onboarding new team members more difficult.
Use destructuring assignment to extract the needed property directly from the awaited value. This eliminates the need for parentheses and makes the intent clearer.
const foo = (await import('./foo.js')).default; // Noncompliant
const {default: foo} = await import('./foo.js');