Sonar gives 'Expected an assignment or function call' message

Question

I work in NgRx and I receive this error:

'Expected an assignment or function call and instead saw an expression.'

Sonar issue in this.sfForm.get('code')?.[this._mode ? 'disable' : 'enable']();.

I don't understand the message from the Sonar, and what to fix here. I need some help to understand the code and resolve the issue.

<mat-form-field [formGroup]="sfForm">
  <input Input
         matInput
         (keydown.enter)="search($event.target.value)"
         [type]="''"
         formControlName="code"
         required>
</mat-form-field>

sfForm: FormGroup;
private _mode: boolean = true;
      
public set scanMode(value: boolean) {
  this._mode = value;
  this.sfForm.get('code')?.[this._mode ? 'disable' : 'enable']();
}

`this._mode ? 'disable' : 'enable'` - [Question mark and colon in JavaScript](https://stackoverflow.com/q/1771786); `[]` - [JavaScript property access: dot notation vs. brackets?](https://stackoverflow.com/q/4968406); `?.` - [Optional Chaining in JavaScript](https://stackoverflow.com/q/26183944); [What does this symbol mean in JavaScript?](https://stackoverflow.com/q/9549780) — VLAZ, Sep 14 '20 at 09:16
`this.sfForm.get('code')?` will get the value of `'code'` in a null-safe way, then `[this._mode ? 'disable' : 'enable']` will either get the `'disable'` or `'enable'` property from that result depending on `this._mode`, finally whatever is fetched will be executed as a function with `()` — VLAZ, Sep 14 '20 at 09:18

Lionel Rowe · Accepted Answer · 2020-09-14T11:59:32.210

5

Here's a breakdown of that line:

this.sfForm.get('code') // get by the key "code"
?.                      // if `undefined` or `null`, stop here (see #1 below)
[                       // else, get prop by expression in [square brackets]
    this._mode ?        // if this._mode is truthy...
        'disable'       // that prop is 'disable'
        : 'enable'      // else, that prop is 'enable'
]                       // (see #2 below)
()                      // call the function identified by that prop (with 0 args)

In more verbose code, it might look like this:

const code = this.sfForm.get('code')

if (code !== null && typeof code !== 'undefined') {
    let modeFunction

    if (this._mode) {
        modeFunction = code.disable
    } else {
        modeFunction = code.enable
    }

    modeFunction()
}

edited Sep 14 '20 at 11:59

answered Sep 14 '20 at 09:37

Lionel Rowe

5,164
1
14
27

Thank you.... :) very help full explainion. can I put ,if condition -> the sonar issue resolve ,, but code not like inline. are their any way to fix that sonar issue , with out go to more basic level ? – uma Sep 14 '20 at 12:58
1

I assume (based on [this question](https://stackoverflow.com/questions/45573277/react-expected-an-assignment-or-function-call-and-instead-saw-an-expression)) the error is coming from eslint? Possibly the linter is failing to recognize the line as a function call, which it definitely is (as long as `this.sfForm.get('code')` doesn't return something nullish). If the code's already working as intended, try adding `// eslint-disable-next-line @typescript-eslint/no-unused-expressions` before the offending line. – Lionel Rowe Sep 14 '20 at 13:26

score -1 · Answer 2 · answered Sep 14 '20 at 09:27

-1

If you mean to assign the labels, you cannot do that in this way. when you do

object[field]

like you did, you cannot assign values.

What you can do, is something like this :

this.sfForm.get('code')?.[this._mode] = this.sfForm.get('code')?.[this._mode] ? 'disable' : 'enable'

or in a shorter way if you want to put the field in a variable.

Also, note that you cannot call to functions inside of the '?' assigns, but only use statements.

answered Sep 14 '20 at 09:27

adamC

235
1
4

2

The code in the OP is valid. Your interpretation completely changes the semantics of it. – VLAZ Sep 14 '20 at 10:31

Sonar gives 'Expected an assignment or function call' message

2 Answers2