Closures inside a loop without using anonymous functions - javascript

Question

After linting my code with JSHint, it came up with an advisement not to create new functions in a for loop like below:

for (var i = 0; i < AnArray.length; i++){
    // code that creates an element
    (function(_i) {
        element.addEventListener(
            "click",
            function() { DoSomething(_i); }
        );
    })(i);
}

Where DoSomething(arg) does something related to that Array entity. I've tried code like below, with no luck.

function RegisterClick (elem, i) {
    elem.addEventListener(
        "click",
        function() { DoSomething(_i) }
    )
}

for (var i = 0; i < AnArray.length; i++){
    // code that creates an element
    (RegisterClick (_elem, _i)) (element, i);
}

1. Is this something I should worry about in the long run?
2. Is there a way not to create new functions but get the benefit of closures?

Answer 1

I've tried code like below, with no luck.

You're over-thinking your code. You have way too many parenthesis. You just need to call the function. The return value is undefined, you don't need to call that. You also need to keep your variable names straight.

function register_click(elem, i) {
    elem.addEventListener(
        "click",
        function() { DoSomething(i) }
    );
}

var _elem = something_that_gets_an_element();

for (var i = 0; i < an_array.length; i++){
    register_click(_elem, an_array[i]);
}

Is this something I should worry about in the long run?

Creating the function separately makes for clearer code that is easier to read. It has fewer nested scopes, so it is easier to keep track of which variable is which.

Is there a way not to create new functions but get the benefit of closures?

You might be looking for let as described at the end of this answer.