Question

I am creating a script which may be used on a variety of websites. Since I don’t know the circumstances of it’s use, I’d like to be able to place it in a sandbox of sorts, where it does not affect other javascripts on the page, and is in turn not effected by other javascripts.

The most basic start is using a self-invoking function:

(function(){
   x = function(){ alert('hi!');
   x();
})();

But my problem is that if x is already assigned as such, you cannot override it:

x = function(){ alert('too late!');
(function(){
   x = function(){ alert('hi!');
   x();
})();

This will alert “too late!” rather than “hi!”, which is not my desired effect. Can anyone help?

Answer 1

Don’t forget to use the var statement, if you don’t use it the variable will be declared in the global scope. You’re on the right track though, create your own scope within an immediately executed function. For example:

var x = function() { alert('foo') };
(function() {
    var x = function() { alert('bar') }
    x() // 'bar'
}());
x() // 'foo'

Going back to your example:

x = function(){ alert('too late!')};
(function(){
   x = function(){ alert('hi!')};
   x(); // 'hi'
})();
x(); // 'hi'

This will alert ‘hi’ twice, because without the var statement you are working with the same x value in both scopes. If you were to use the var statement inside the self-executing function, the second invocation of x would alert ‘too late!’.