How to avoid no-param-reassign when setting a property on a DOM object
As @Mathletics suggests, you can disable the rule entirely by adding this to your .eslintrc.json
file:
"rules": {
"no-param-reassign": 0
}
Or you could disable the rule specifically for param properties
"rules": {
"no-param-reassign": [2, { "props": false }]
}
Alternatively, you could disable the rule for that function
/* eslint-disable no-param-reassign */
function (el) {
el.expando = {};
}
/* eslint-enable no-param-reassign */
Or for that line only
function (el) {
el.expando = {}; // eslint-disable-line no-param-reassign
}
As this article explains, this rule is meant to avoid mutating the arguments
object. If you assign to a parameter and then try and access some of the parameters via the arguments
object, it can lead to unexpected results.
You could keep the rule intact and maintain the AirBnB style by using another variable to get a reference to the DOM element and then modify that:
function (el) {
var theElement = el;
theElement.expando = {};
}
In JS objects (including DOM nodes) are passed by reference, so here el
and theElement
are references to the same DOM node, but modifying theElement
doesn't mutate the arguments
object since arguments[0]
remains just a reference to that DOM element.
This approach is hinted at in the documentation for the rule:
Examples of correct code for this rule:
/*eslint no-param-reassign: "error"*/
function foo(bar) {
var baz = bar;
}
Personally, I would just use the "no-param-reassign": ["error", { "props": false }]
approach a couple of other answers mentioned. Modifying a property of an object that was passed as a parameter doesn't change the object reference, so it shouldn't run into the kinds of problems this rule is trying to avoid.