How to avoid no-param-reassign when setting a property on a DOM object

Question

I have a method which\'s main purpose is to set a property on a DOM object

function (el) {
  el.expando = {};
}

I use AirBnB\'s code style

Answer 1

You can also use lodash assignIn which mutates the object. assignIn(obj, { someNewObj });

https://lodash.com/docs/4.17.2#assignIn

Answer 2

If you want to change any value inside an object array, you can use

array.forEach(a => ({ ...a, expando: {} }))

Answer 3

The no-param-reassign warning makes sense for common functions, but for a classic Array.forEach loop over an array which you intend to mutate it isn't to appropriate.

However, to get around this, you can also use Array.map with a new object (if you are like me, dislike snoozing warnings with comments):

someArray = someArray.map((_item) => {
    let item = Object.assign({}, _item); // decouple instance
    item.foo = "bar"; // assign a property
    return item; // replace original with new instance
});

Answer 4

function (el) {
  el.setAttribute('expando', {});
}

Everything else is just ugly hacks.

Answer 5

You can override this rule inside your .eslintrc file and disable it for param properties like this

{
    "rules": {
        "no-param-reassign": [2, { 
            "props": false
        }]
    },
    "extends": "eslint-config-airbnb"
}

This way rule is still active but it will not warn for properties. More info: http://eslint.org/docs/rules/no-param-reassign

Answer 6

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 the parameter doesn't mutate what that parameter refers to and shouldn't run into the kinds of problems this rule is trying to avoid.