Javascript: Inline function vs predefined functions

Question

Can any body throw me some arguments for using inline functions against passing predefined function name to some handler.

I.e. which is better:

(function(){
  setTimeout(function(){ /*some code here*/ }, 5);
})();

versus

(function(){
  function invokeMe() {
    /*code*/
  }
  setTimeout(invokeMe, 5);
})();

Strange question, but we are almost fighting in the team about this

Answer 1

There are no technical reasons to prefer one version over the other. For me is usually depends on two things:

1. I want to resuse the passed callback in another context. In this case I define the function standalone and pass the reference.
2. The callback is larger than ~10 lines of code and the function expects additional arguments after the callback. In this case it is hard to reconstruct, which values are actually passed to the function.

Example:

setTimeout(function() { // I need to scroll to see the other arguments

  // many lines of code

}, 0); // <- where does this '0' belong to?

Answer 2

I suggest a full duel between opposing team members to settle such arguments.

More seriously, in the end it just doesn't matter. The first form (non-named functions) tends to get unwieldy with larger functions, but isn't a big deal at all with small (1-2 line) functions. The second form is similarly harmless.

Any argument against either style is pure bikeshedding, imo.

Answer 3

IMO, declaring a function will be useful only if you intend to re-use it later, in some other way.

I personally use function expressions (first way) for setTimeout handlers.

However you might want to know the differences between function declarations and function expressions, I recommend you the following article:

• Named function expressions demystified

Answer 4

I think that the only difference in a code like that is that with the second piece of code you can re-call the same function (sometimes with "timer functions" it's useful):

(function(){
  function invokeMe() {
    if(..) setTimeout(invokeMe, 5);
  }
  setTimeout(invokeMe, 5);
})();

Answer 5

There is one significant difference between the two: The latter one has a name.

I like to help my tools help me, and so I mostly avoid anonymous functions as my tools can't give me meaningful information about them (for instance, in a call stack list in a debugger, etc.). So I'd go with the

(function(){
  function invokeMe() {
    /*code*/
  }
  setTimeout(invokeMe, 5);
})();

...form in general. Rules are meant to be broken, though, not slavishly bowed to. :-)

Answer 6

An inline function avoids namespace pollution and predefined functions have higher reuse. I think you could make cases where each is appropriate.

Answer 7

in the example provided, the declaration and use of the function are so close that i think the only difference is readability. i prefer the second example.

Answer 8

I prefer to use named functions. Named functions show by name on all debuggers (air, firebug, IE).

Example:

Notice that you can also have inline named functions like

{
    method: function obj_method(){}
}

This way, when you look at the stack trace, you'll see function obj_method instead of anonymous.

Were you asking about when to inline a function rather than declare it? When it makes sense in the code. If you need it from two different places, it can't be inline. Sometimes inline make the code easier to read, sometimes harder.

Answer 9

There is an actual technical difference: if you create an anonymous function inside another function and assign it to anything outside of the parent function (like a button onclick event), then this piece of code will stay in memory forever, thus a memory leak (at least in IE and Firefox). If you are writing an online application, than you should avoid anonymous functions.

It is a great feature of Javascript, but unfortunately it leads to problems, which can later become too difficult to tackle.