Thursday, January 12th, 2006
JavaScript Tip: Running code in the dark
Category: JavaScript
, Tip
At a recent client, we were finding strange behaviour occuring in the JavaScript side of the house.
After taking a look, the problem was namespace collisions.
A couple of the developers were new to JavaScript, and didn’t know about the scoping world.
For example, the classic:
var foo = “whee”;
when placed at the top level of a script, and run in a browser, will actually set a variable on the scope that it is in, which is “window”.
You can simply test this with:
var foo = “whee”;
alert(”foo = ” + foo);
alert(”window.foo = ” + window.foo);
As such, the project was polluting the window object with everything under the sun, and there were conditions in which clashes occured.
We quickly fixed this with the lovely trick:
(function() {
// do you stuff here!
})();
You can make sure that the namespace is save with another simple example:
(function() {
var foo = “whee”;
alert(”inside: ” + foo);
})();
alert(”outside: ” + foo); // no var foo!
So, is it namespaces or scope?
And what are those fancy parentheses around the function for?
Variable declared inside the function is not visible outside anyway.
wtf: You need to do more than just define the function, you need to call it also for the code to actually run. The (…)(); is what it takes to invoke the nameless parameterless function defined.
Ajaxian - un blog para programadores AJAX
Ajaxian publica cada dia una media de dos articulos relacionados directamente con código AJAX. Interesante sobre todo su post llamado “10 motivos por los cuales AJAX apareció para quedarse”
en inglés, claro…
Dealing with JavaScript Scope
Over at Ajaxian, they’ve offered up a useful tip for dealing with code that exists in the global namespace and is conflicting with other scripts: move it into its own function. Example: (function() { // do you stuff here! })();…
Or use:
new function() {
// do stuff
}
A little cleaner syntax and it can also be used in place of object literals if you want to use arbitrary code. (Explanation: It defines and calls a constructor in place.)
Side comment: Your banner ad is blinking on the left as I type. Very annoying.
Getting back to the window scope is straight forward too.
(function() {
window.foo = "whee";
var bar = "boo";
})();
alert("outside: " + foo); // foo! but no bar.
–
Simon
I think I beat you to this tip by about 16 months. :-) But it was worth coming here to see to see Tom’s cool variation on the technique. I never thought of doing it that way!
Of course, if you want to pass any arguments into the anonymous function, you’ll still need the extra parens, whether you use
newor not.The constructor function version has the edge for me because I have found that the earlier wrapped-in-parens version causes problems with prototype addition declarations in certain Javascript/JScript environments.
Re previous comment:
Gary, I’m finding this to work out quite well, ..so far
new function foo(a)
{
doo = function(){alert(a)}
}(4)
doo()