That's a great explanation, James. I hope you won't mind if I nitpick a
point of terminology.
The code you were talking about is not a closure:
(function() { /* do some stuff */ })();
As you described, the advantage of this code is that any variables you
define inside the function won't pollute the global namespace. But that
doesn't make it a closure. A more accurate way to describe it is an
anonymous function expression that is called immediately.
Here's a version of the code that doesn't use the anonymous function
expression. It's more obvious how this works:
function someUniqueName() {
/* do some stuff */
}
someUniqueName();
That code does the same thing, except that it also leaves "someUniqueName"
defined in the global namespace (if it is a global function). As you
explained, the first version of the code avoids that namespace pollution.
Both versions do share the advantage that local variables inside the
function won't go into the global namespace.
Now, either version of the code may *create* a closure, or it may not,
depending on what "some stuff" is.
For example, this code does *not* create a closure:
(function() {
var text = 'hi';
alert( text );
})();
Whereas this code *does* create a closure:
(function() {
var text = 'hi';
setTimeout( function() {
alert( text );
}, 1000 );
})();
What's the difference? The first example has a local variable 'text' which
is used temporarily while the function is running, but there is no need to
preserve that variable (or anything else in the function) after the function
returns. So as soon as the function returns, the 'text' variable is
available for garbage collection.
The second example also has a local variable 'text', but this variable
*cannot* be released when the function returns. That's because the variable
is referenced in the setTimeout() callback function, which will be called a
full second later - long after the original function has return.
So in this case, the 'text' variable has to be preserved for its later use
in the setTimeout() callback.
That's what a closure is. It's when JavaScript has to preserve a function's
local variables (including any function arguments) after the function
returns. If there's no need to keep those variables in existence, then
JavaScript doesn't create a closure.
This code creates a closure just like the last example does:
function anotherUniqueName() {
var text = 'hi';
setTimeout( function() {
alert( text );
}, 1000 );
}
anotherUniqueName();
It's not the specific form of the function call that makes it a closure or
not, it's whether JavaScript has to preserve the function call's context
after the function returns.
For the gory details, here's the "standard reference" on JavaScript
closures:
http://www.jibbering.com/faq/faq_notes/closures.html
-Mike
> From: James
>
> This:
> (function() { do some stuff } )();
>
> is known as a closure. It just runs once and it does not
> leave around any global variables (that is, if you also don't
> set any inside this function also).
>
> Compared to this:
> function doSomething() { // do some stuff };
>
> The doSomething variable will exist (globally) to be
> available for access again. It will exist in memory, and may
> possibly "pollute" the global namespace. This is usually a
> problem if you have a lot of other Javascript that may have
> same variable name conflicts (e.g. multiple Javascript
> libraries). In the first example, no such global variable
> will exist. It will run once, and disappear.
>
> In your example:
> (function($) { do some stuff } )(jQuery);
>
> The $ variable (local) has the value of the jQuery (global)
> variable, therefore, inside your closure, you can use $ as
> your jQuery variable.
> On Jul 25, 6:35 am, Aleksey <gabb...@gmail.com> wrote:
> > Well, it's a common pattern that is used when creating a jQuery
> > plugin.
> > A common problem doing that is the use of a '$' sign, because other
> > frameworks use it too as well. I didn't try to use some frameworks
> > simultaneously yet, so I didn't encountered that problem by myself.
> > One of the way is to use 'jQuery' instead of '$' ('$' is a
> shorthand
> > of 'jQuery'), and to write, for example:
> >
> > jQuery('a').click(function() { });
> > instead of
> > $('a').click(function() { });
> >
> > But there is another way - this pattern allows you to use
> '$' in your
> > jQuery code without the worry of malfunctioning.
> >
> > You can read more about the creating jQuery plugin in the following
> >
> articles:http://blog.themeforest.net/tutorials/ask-jw-decoding-self-in
> >
> voking-a...http://blog.jeremymartin.name/2008/02/building-your-first-j
> > query-plug...http://docs.jquery.com/Tutorials
> >
> > Good luck)
> >
> > On Jul 25, 4:04 pm, Kris <ilaymy...@yahoo.com> wrote:
> >
> > > What does this do?
> > > (function($) { do some stuff } )(jQuery);
> >
> >
>
