JS Hint - don't make functions within a loop

Question

I can not get around JSHint\'s error message. Here is the loop I am using:

for (i = 0; i < Collection.length; i += 4) {
    data.push({
        items : Co         


        

Answer 1

Declaring a function in a loop is messy, and potentially error prone. Instead, define the function once, and then enter the loop.

var objMaker = function(item) {
    return {
        id : item[0],
        title : item[1],
    };
};

for (i = 0; i < Collection.length; i += 4) {
    data.push({
                  items : Collection.slice(i, i + 4).map(objMaker)
             });
}

Answer 2

People say "Declaring a function in a loop is messy and potentially error-prone", but functions within loops is what directly instructed in, for example, Array.prototype.forEach method. Just because the word "function" should theoretically mean defining it anew in every forEach call it does not mean it is actually defined each time by the Javascript engine.

The same goes for outer loops since engines have "lazy" processing of instructions. They are not going to redefine the whole forEach/Map/etc construct-instruction anew if nothing really changed about it, they will just feed new arguments to it.

The times of ancient JS engines which were clueless about such simple things as well as of code context are long gone. And yet we are getting this ancient warning which was conceived when functions were not yet capable of being passed as arguments as in the cases of forEach or Map.

Answer 3

You can just move the function outside the loop and pass a reference to it to map:

function mapCallback(item) {
    return {
        id : item[0],
        title : item[1],
    };
}
for (i = 0; i < Collection.length; i += 4) {
    data.push({
        items: Collection.slice(i, i + 4).map(mapCallback)
    });
}

Alternatively, you can use a JSHint directive to ignore function expressions inside loops. Just put this at the top of the file in question:

/*jshint loopfunc: true */