JS - function declared inside a function

Question

Is it ok regarding performance and efficiency to declare a function inside a function that is called on each AnimationFrame? Is A) as ok as B) ?

A)

function update() {
 function do () { ...}
}

B)

function update() {
 do();
}
 function do () { ...}

• tadman: Why would you declare the function on every frame?
• user1477955: just to closure, what belongs together, sharing same varibales
• epascarello: A and B do not act the same.

Answer 1

No, it's not a good idea because you're making it redeclare the same function over and over.

A better pattern would be:

(function() { // this is your closure
 var genericVariableOne = 123,
 genericVariableTwo = 456;
 function genericFunctionOne() {...}
 // now do stuff here
})();

This way you are only declaring functions once within the closure. For variables, declaring them outside may or may not be a good idea depending on how they are used.

Answer 2

Yes - it is ok to declare functions inside functions and in fact desirable in many situations. They are called closures. All major JavaScript APIs depend on this concept heavily from jQuery, to AngularJS to Dojo. Older versions of MSIE discouraged it's use but all modern browsers use JavaScript engines that are very efficient and can give you good performance with closures.

• tadman: "Okay" and performant are two completely different things here.
• Chad Killingsworth: Closures block garbage collection of their entire scope chain for the life of the closure. Function binding or refactoring is a much better solution.