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!

Posted by Dion Almaer at 12:11 am
7 Comments

+++--
3.6 rating from 45 votes

7 Comments »

Comments feed TrackBack URI

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.

Comment by ajaxian — January 12, 2006

ajaxian: 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.

Comment by Claus — January 12, 2006

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…

Trackback by meneame.net — January 12, 2006

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! })();…

Trackback by snook.ca - a collection of tips, tricks and bookmarks in web development — January 12, 2006

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.

Comment by Tom — January 12, 2006

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

Comment by Simon — January 13, 2006

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()

Comment by Saint Jude — January 15, 2006

Leave a comment

You must be logged in to post a comment.