...

View Full Version : (function(){})()



Lamped
11-10-2010, 11:56 PM
I'm a pretty good Javascript developer, but I'm clearly missing a few tricks. Can someone please explain, in as much technical detail as you like, what the following actually means, or does?


(function(){ someCode(); })();

or the jQuery use:


(function(window, undefined){ someCode(); })(this);

Lamped
11-11-2010, 12:14 AM
OK, so...


(function(param){alert(param);})('hai');

... passes 'hai' as the first parameter to an automatically executed anonymous function. I can see the minification benefits of using this with window, document etc as parameters.

Why does Javascript execute the function? What syntactic relevance do the parenthesis have?

Are there any other benefits to this method, other than minification/closure compilation?

Old Pedant
11-11-2010, 01:42 AM
I'm not all that clear that even minification is a big benefit. Closure, okay.

As for the syntax: It's not all that different than doing


( new Date( 2010, 10, 8 ) ).getTime();

Remember that, in JavaScript, functions *ARE* objects.

So what you are really doing is

( new Function() )()

Creating the function as an object and then calling it.

Why don't you need to use a name for the function, as I did for getTime()? Simply because it is, after all, an *anonymous" function and so neither needs nor can use a name!

It's weird, I grant you . But it's not the weirdest thing in JavaScript. (See my long argument/discussion with Philip from yesterday and today re Arrays.sort()!! )

rnd me
11-11-2010, 02:57 AM
Why don't you need to use a name for the function, as I did for getTime()? Simply because it is, after all, an *anonymous" function and so neither needs nor can use a name!


all functions, even the function expressions you call "anonymous", can have names. In the case of function statements, those names are available as local variables. In the case of function expressions, you can optionally assign a variable handle, but the function name (if present) is ALWAYS visible from inside the function.


you should always give all your functions names, it helps debugging and profiling a lot since firebug reports the names:


(function _hide(a){ return a * b;}())




EDIT:
ok, nevermind, i see you were saying it doesn't use a method name. your example was confusing because one is an Object object, whist the other is a function.




i always write it:

(function(){}())

which seems to visually suggest that it's an expression.

glenngv
11-11-2010, 03:10 AM
One of the benefits of using (function(){})() is you avoid possible variable and function name conflicts. In a company where there are tons of developers working on a single website and sharing common and reusable scripts, it's very helpful to use this technique.

This technique is also used in Greasemonkey scripts where there's a great risk that userscript variables and functions will conflict with those of the sites the userscript is coded for.

Lamped
11-11-2010, 09:24 AM
This has been enormously helpful, thank you.

I've had a little "shift in perception" and I can see how Javascript would interpret the parenthesis as "get a copy of this object", in this case a function (which of course, is also an object).

I tend to use the format:


lampedSomething = {
myVar,
init: function() {}
}

or if I'll be instantiating multiple copies:


function lampedMyFunction() {}
lampedMyFunction.prototype.doSomething = function() {}
clientUseOfObject = new lampedMyFunction();

But at least now I can read the jQuery and similar source properly :D



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum