In JavaScript, what are specific reasons why creating functions within a loop can be computationally wasteful?
computation, javascript, loops
Solution
Because you're creating several `Function` objects instead of reusing just one.
Example of creating an identical function...
for (var i = 0; i < 10; i++) {
// v--creating identical function in each iteration.
(function(j) {
var el = document.createElement('a');
el.onclick = function() { alert(j); };
document.body.appendChild(el);
})(i);
}
Example of reusing a named function...
for (var i = 0; i < 10; i++) {
var el = document.createElement('a');
// ----------v---calling a reusable function
el.onclick = createHandler(i);
document.body.appendChild(el);
}
function createHandler(j) {
return function() { alert(j); };
}
The two examples have the same outcome, but the second doesn't require the overhead of making two functions during the loop. Instead it creates just the one handler.
Problem
In JavaScript, what are specific reasons why creating functions within a loop can be computationally wasteful? On page 39 of JavaScript the Good Parts, Douglas Crockford states, "Avoid creating functions within a loop. It can be computationally wasteful". I can't seem to figure out why creating functions within a loop would be anymore wasteful than outside.