anonymous functions versus named function

[hgs]

Hi

Is there a difference in performance or memory consumption, if i create many anonymous functions in a loop like

for (i=0;i<n;i++){
element.onchange=function(){
// some code
};
}

or doing it like


function myfunc(){
// some code
}
for(i;i<n;i==){
element.onchange=myfunc;
}


My feeling is that the second version is 'better" .
Am i Wrong ?


Regards
Heinz

[VIPStephan]

The only difference in this case is that you can re-use the named function while the anonymous one would have to be redefined everytime (in which case the performance would suffer). However, which way to go depends on the application.

[niralsoni]

Have you heard the term 'Carpool', which is sharing a ride by multiple persons going to same location/direction. Recollect the advantages of using carpool.

Now, consider named function as the 'Carpool' wherein multiple DOM objects are utilising/ reusing the named function, similar to multiple persons sharing a ride.

So, its better to use named function for doing the same things (or similar things) multiple times.

Hope this clarifies your doubt.

Regards,
Niral Soni

[Old Pedant]

Actually, we had quite a discussion on this just last week.

Apparently, the answer depends on the browser. Although perhaps it shouldn't. The ECMAScript standard says that all identical functions can be (and should be, though the "should" is less clear) represented by a single function that is shared.

And some browsers apparently do exactly that. Meaning that, unless you used your function myfunc in some place *OTHER* than shown here, the two sets of code you showed are identical. All those supposedly separate anonymous functions will actually all be automatically rolled into one implementation by the newer and smarter browsers.

However, it does seem true that there are enough older browsers out there that do *NOT* do this that the second approach is the better one in the near future.

[AndrewGSW]

Does it make if a difference if we name the function?

for (i=0; i<n; i++) {
    element.onchange = function somename() {
    // some code 
    };
}

[felgall]

Originally Posted by AndrewGSW

Does it make if a difference if we name the function?

for (i=0; i<n; i++) {
    element.onchange = function somename() {
    // some code 
    };
}

Yes, there are some browsers that don't understand named functions in assignments and so those browsers will fail to run the code.

It is best to avoid using named functions at all. Assigning anonymous functions to variables allows for far greater flexibility and can be used in many places where named functions are not permitted (such as inside an if statement).

The better version of the OP's original code is:

myfunc = function(){
 // some code
 }
 for(i;i<n;i++){
 element.onchange=myfunc;
 }

[rnd me]

Originally Posted by AndrewGSW

Does it make if a difference if we name the function?

for (i=0; i<n; i++) {
    element.onchange = function somename() {
    // some code 
    };
}

no, it's still a function expression instead of a lexical-hoisting function statement. the only place somename could be seen in a your function expression is inside the function.

named functions are easier to debug than digging through 50 different anonymous() calls in a exception stack or firebug trace.

i think for that reason alone, it's better to use named function statements.

how to spot the diff?
if the char to the left of the word function is a line-terminator or semi-colon, and there is a white-space after "function" followed by /[a-z_$]+/i before the opening paren, it's a statement.

almost always, the chars to the left of the word function is whitespace and/or "=" in function expressions, which may or may not have an internal name.


i recommend giving even function expressions names for self-documentation, easier maintenance, and more-precise debugging information when you need it most.

[rnd me]

Originally Posted by felgall

Yes, there are some browsers that don't understand named functions in assignments and so those browsers will fail to run the code.

i don't see how a name or lack of name makes any difference at all to a function expression in any browser i've ever used. such a browser would not meet the spec.

can you give an example?

[felgall]

Originally Posted by rnd me

i don't see how a name or lack of name makes any difference at all to a function expression in any browser i've ever used. such a browser would not meet the spec.

can you give an example?

Three examples:

Named functions cannot be used in expressions in IE8. You can either use a named function outside an expression or an anonymous function inside an expression in that browser but cannot give the function a name and assign it in the same statement and have it run in that browser. IE8 runs jScript rather than JavaScript and so isn't required to comply with the JavaScript spec as it complies with the jScript spec which doesn't allow named functions in expressions.

Self executing named functions do not work in IE8 or Safari 2.

You cannot return a named function in IE8 or Safari 2.

[AndrewGSW]

almost always, the chars to the left of the word function is whitespace and/or "=" in function expressions, which may or may not have an internal name.

Just to mention other possibilities though:

something = (function () {
    // immediately invoked function expression (IIFE)
})();

get: function (arg) {
// attribute (method) assignment.

[rnd me]

Originally Posted by felgall

Named functions cannot be used in expressions in IE8. You can either use a named function outside an expression or an anonymous function inside an expression in that browser but cannot give the function a name and assign it in the same statement and have it run in that browser. IE8 runs jScript rather than JavaScript and so isn't required to comply with the JavaScript spec as it complies with the jScript spec which doesn't allow named functions in expressions.

var sum=function SUM(x,y){return x+y;};
alert(sum(4,5)==9)

Originally Posted by felgall

Self executing named functions do not work in IE8 or Safari 2.

(function doSum(){

  var sum=function SUM(x,y){return x+y;};
  alert(sum(4,5)==9)

}());

Originally Posted by felgall

You cannot return a named function in IE8 or Safari 2.

alert (function doSum(){
  function SUM(x,y){return x+y;};
  return SUM;
}());

all three code boxes test in IE10 as IE8, which is supposed to be jScript mode. the engine can be verified by the following test:

"v"=="\v" // true in jScript, false in ECMA5

i don't have safari2, but i doubt anyone would miss that 7 year old browser...

if indeed my tests don't pan out on a "real" copy of IE8, i'll concede the point, but from what i can tell you're wrong in all three examples.

i tested your if statement claim and both IE8(via IE10) and chrome show 3 here:

 alert ( a() );

if(function a(){return 1;}){
  function a(){return 2;}
}else{
  function a(){return 3;}
}

and both throw as expected on this code:

alert( a() );

if(function a(){return 1;}){
  var a=function a(){return 2;}
}else{
  var a=function a(){return 3;}
}

maybe i'm misunderstanding your claims.
if you can show code describing what you say won't work i'd be very interested.
i do think that basic IE8 jscript should not be walled-out by a fundamental pattern, at least not just yet.
still, i can see no evidence to support your claim, so i must shift the burden of demonstrativeness to you.

[Old Pedant]

well, yes. But attribute assignment is just "syntactic sugar".

There's no difference semantically between

var f = new Object( );
f.get = function( arg ) { ... }

and

var f = {
    get : function( arg ) { ... }
}

Just two different syntaxes for acconplishing the same semantics.

Don't get me wrong, the latter code this is very nice syntactic sugar to have available, but if it didn't exist you could live without it.