no-loop-func

#eslint #javascript

Continuing the eslint path, this was also a query I got earlier today.

The problem...

function myFunc(complexObject) {
    // Checking validity of complexObject
    // checking in a nested property
    for(var i=0;i<complexObject.subArray.length;i++) {
        var item = complexObject.subArray[i];
        var subItemToWorkWith = item.lines.filter(function(line) {
            return line.header_id === complexObject.header.id;
        });
    }
}

ESlint will complain about filter having a function definition inside a for-loop which is dependent on a variable outside of the scope of the loop itself. To solve this you have to pass a pre-defined function as a callback-parameter to filter-function.

For this particular example it would be to define a function that takes a parameter for the header id of the complexobject, and then return the function that does the actual filtering.

function myFuncHeaderFilter(headerid) {
    return function(line) {
        return line.header_id === headerid;
    };
}
function myFunc(complexObject) {
    // Checking validity of complexObject
    // checking in a nested property
    for(var i=0;i<complexObject.subArray.length;i++) {
        var item = complexObject.subArray[i];
        var subItemToWorkWith = item.lines.filter(
            myFuncHeaderFilter(complexObject.header.id)
        );
    }
}

Again, this makes the code cleaner, easier to read, as long as you group these things in the file or sort them out in a logical structure. It also increases the possibility of code-reuse as well as making it more testable and therefore maintainable.

References that mention the same thing;
https://github.com/eslint/eslint/issues/5044
http://linterrors.com/js/dont-make-functions-within-a-loop