解决由于`no-param-ressign`和`prefer-rest-params`导致的ESLint错误

Question

I am trying to resolve these two ESLint errors for the bit of code included below but cannot get my head around it.

9   error  Assignment to property of function parameter 'opts'  no-param-reassign
10  error  Use the rest parameters instead of 'arguments'       prefer-rest-params

And this is the code snippet:

 8  initialize(opts) {
 9    opts.hasStar = true;
10    AbstractResultView.prototype.initialize.apply(this, arguments);
11  }

I have already tried these for the second error but so far no luck:

 8  initialize(...args, opts) {
 9    opts.hasStar = true;
10    AbstractResultView.prototype.initialize.apply(this, args);
11  }

and

 8  initialize(opts, ...args) {
 9    opts.hasStar = true;
10    AbstractResultView.prototype.initialize.apply(this, args);
11  }

As for the first error, I have no idea how to fix it...

Should mention that this is not my code (I am just trying to fix it) so I may be missing something...

Answer 1

The first error is here because in your eslint configuration you use the following:

no-param-reassign: ["error", { "props": true }]

Because of the "props": true , you can't reassign an object property if this object is a parameter of the function. Your choices here are limited. You can remove the line or change the eslint configuration.

More informations on this specific rule : https://eslint.org/docs/rules/no-param-reassign

You can have more information on the second error here : https://eslint.org/docs/rules/prefer-rest-params

But according to the documentation, your second code ( initialize(opts, ...args) { ) should fix the issue.

Answer 2

Try this:

initialize(opts, ...args) {
    AbstractResultView.prototype.initialize.apply(
        this,
        [
            {
                ...opts,
                hasStar: true
            },
            ...args
        ]
    );
}

This will:
1. Take first arg and change its prop hasStar without modifying source object
2. Pass all args including modified first one to initialize

Answer 3

In first case, eslint is trying to avoid modifications in your function argument, which is a bad habit called side effect .

Second case, eslint is trying to avoid you to use arguments once spread operator is up to use.

Wrong:

initialize(opts) {
  opts.hasStar = true;
  AbstractResultView.prototype.initialize.apply(this, arguments);
}

There are various ways to do it right. I' would try make it this way:

initialize(...args) {
  AbstractResultView.prototype.initialize.apply(this, args);
}

initialize(opts); // call method
opts.hasStar = true; // after assign a prop to it

All of this is by eslint point of view. You can supress this warning and continue doing your code if you would like to.

Answer 4

Eventually, I found a solution that resolves both issues:

 8  initialize(...args) {
 9    // with destructuring:
10    const [opts] = args;  
11    // or without desctructuring:
12    // const opts = args[0];
13    opts.hasStar = true;
14    AbstractResultView.prototype.initialize.apply(this, args);
15  }