javascript - error "Invalid parenthesized assignment pattern" background info - Stack Overflow

admin管理员组

文章数量:1410697

In my React project, I got this error:

SyntaxError: ... Invalid parenthesized assignment pattern
const add = (a, b) = { return a + b; };
             ^

I do understand the error, but I am surprised that I could not find any information about it.

• Where does it e from ?
• Where is it documented ?

What I want to understand

I do understand the problem here (the '>' is missing in this arrow function), but I wonder (1) where this error es from exactly (not the Browser?), and (2) where could I find information about it.

The error message obviously interprets this as a wrong assignment, not as a wrong arrow function:

const add = (a, b) = { return a + b; };
// error ----^
// actually wrong --^

Where it obviously does not e from:

If I write the same statement in the NodeJs CLI, I get:

const add = (a,b) = { return ''; }
            ^^^^^
ReferenceError: Invalid left-hand side in assignment

in the Firefox console:

SyntaxError: invalid assignment left-hand side

Note that I am using Firefox for development, but the error message during development is different than the error message when I try the same in the Firefox console (Invalid parenthesized assignment pattern vs. SyntaxError: invalid assignment left-hand side)

In my React project, I got this error:

SyntaxError: ... Invalid parenthesized assignment pattern
const add = (a, b) = { return a + b; };
             ^

I do understand the error, but I am surprised that I could not find any information about it.

• Where does it e from ?
• Where is it documented ?

What I want to understand

I do understand the problem here (the '>' is missing in this arrow function), but I wonder (1) where this error es from exactly (not the Browser?), and (2) where could I find information about it.

The error message obviously interprets this as a wrong assignment, not as a wrong arrow function:

const add = (a, b) = { return a + b; };
// error ----^
// actually wrong --^

Where it obviously does not e from:

If I write the same statement in the NodeJs CLI, I get:

const add = (a,b) = { return ''; }
            ^^^^^
ReferenceError: Invalid left-hand side in assignment

in the Firefox console:

SyntaxError: invalid assignment left-hand side

Note that I am using Firefox for development, but the error message during development is different than the error message when I try the same in the Firefox console (Invalid parenthesized assignment pattern vs. SyntaxError: invalid assignment left-hand side)

• javascript
• reactjs

Share Improve this question Follow edited Apr 2, 2022 at 6:25 kca asked Sep 15, 2020 at 10:55 kcakca 6,16711 gold badge3131 silver badges5050 bronze badges 2

• 3 It es from babel's parser . Error messages are not necessarily standardized. – Felix Kling Commented Sep 15, 2020 at 10:58
• 2 The "rules" for a syntax error can be tricky to find. After all, since it's a syntax error, we don't necessarily know how the parser sees the code. If the parser parses (a, b) as the grouping operator, then that operator delegates the valid assignment target check to its containing expression. a,b would be the ma operator, which cannot be assigned to: ecma-international/ecma-262/10.0/… – Felix Kling Commented Sep 15, 2020 at 11:06

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Since you are using the ES6 arrow function, you have to define =>

const add = (a, b) = { return a + b; }; // here you missed arrow for function **=>**

const add = (a, b) **=>** { return a + b; }; //modified by adding **=>**

The error message es from the Babel parser.

The text is defined in babel / packages / babel-parser / src / parse-error / standard-errors.ts:

InvalidParenthesizedAssignment: "Invalid parenthesized assignment pattern.",

Documentation

These kind of errors are (apparently) not documented on a user level, but there is some explanation in the source code in babel / packages / babel-parser / src / util / expression-scope.ts:

line 32:

- MaybeArrowParameterDeclaration
  A scope that represents ambiguous arrow head e.g. `(x)`. Errors will be recorded
  alongside parent scopes and thrown when `ExpressionScopeHandler#validateAsPattern`
  is called.

line 164:

* A parenthesized identifier (or type assertion) in LHS can be ambiguous because the assignment
* can be transformed to an assignable later, but not vice versa:
* For example, in `([(a) = []] = []) => {}`, we think `(a) = []` is an LHS in `[(a) = []]`,
* an LHS within `[(a) = []] = []`. However the LHS chain is then transformed by toAssignable,
* and we should throw assignment `(a)`, which is only valid in LHS. Hence we record the
* location of parenthesized `(a)` to current scope if it is one of MaybeArrowParameterDeclaration
* and MaybeAsyncArrowParameterDeclaration

本文标签： javascripterror quotInvalid parenthesized assignment patternquot background infoStack Overflow