dont-loop-functions.js

// THE WRONG WAY TO DO IT ////////////////
_([1, 2, 3]).forEach(function(num) {    // for numbers 1..3, create a function that takes a `num`
  $('div.' + num).click(function () {   // when a div with the class `num` is clicked
    console.log('you clicked ' + num);  // log "you clicked `num`"
  });                                   //
});                                     //
//////////////////////////////////////////

// THE RIGHT WAY TO DO IT //////////////
var bindToClick = function (num) {    // create a function that takes a `num`
  $('div.' + num).click({             // when a div with the class `num` is clicked
      "num": num                      // set event.data.num to `num`
    }, logClick);                     // call our logClick function, passing it `event` implicitly
};                                    //
                                      //
var logClick = function (event) {     // create a function that handles the `event` object
  var num = event.data.num;           // grab number from event.data.num
  console.log('you clicked ' + num);  // log "you clicked `num`
};                                    //
                                      //
_([1, 2, 3]).forEach(bindToClick);    // for numbers 1..3, call our function
////////////////////////////////////////

Since Javascript treats functions as objects, declaring a function in a loop means that the same function is being saved to memory every time. While this isn't a big deal in small doses, it's a total performance headache at a larger scale.

By the way, here are links to the documentation for the forEach and click methods I used, plus the docs for event.data. Please let me know if you have any questions!

Hmm! interesting approach. I wonder though that in terms of performance, they have pretty much the same impact but I agree that it looks more re-factored and understandable i.e. separation of concerns. Thoughts?

At small scale, the performance benefits are negligible, but you're going to overflow your memory trying to read/write 20,000 files asynchronously while declaring your function in a loop. Don't even get me started on subloops... trying to do comparisons on each of these with each of the others put you somewhere around 400,000,000 functions that your computer is storing in memory.

The above file, for example, is 1305 bytes. Do that 20,000^2 times and you're going to have a problem unless you're sitting on ~500GB of RAM.

I see that now and understand where you are coming from. But may be I wasn't able to lay down what exactly I meant by "performance" and what approach I would suggest in such a case. Perhaps I should find some time to make an example script to tell you what I mean.

Thanks a lot for the explanations though. Appreciate it.