Check the existence of variable in the global namespace without alternate name

Question

As a newbie in Design Patterns in Javascript, I came across the Module Pattern but I don't get something with namespace.

In the namespacing part of Addy Osmani's online book about JS Design Patterns, Addy explains those 5 ways of checking for variable / namespace existence:

// This doesn't check for existence of "myApplication" in
// the global namespace. Bad practice as we can easily
// clobber an existing variable/namespace with the same name
var myApplication = {};

// The following options *do* check for variable/namespace existence. 
// If already defined, we use that instance, otherwise we assign a new 
// object literal to myApplication.
// 
// Option 1: var myApplication = myApplication || {};
// Option 2  if( !MyApplication ){ MyApplication = {} };
// Option 3: window.myApplication || ( window.myApplication = {} );
// Option 4: var myApplication = $.fn.myApplication = function() {};
// Option 5: var myApplication = myApplication === undefined ? {} : myApplication;

What I really don't get is how it solves the problem of naming.

Let's say myApplication is set up before my code tries to use myApplication. Using Option 1 for example (or actually all of the options), does not seem to change anything in case myApplication was already in use but only overwrite the previous values for myApplication:

// Higher in some script, where I don't know about it
var myApplication = 'whatever string or object used by the script';

// A bit of code later, where I come with my little Module Pattern
var myApplication = myApplication || {}; // Using Option 1

myApplication = (function($) {
   var myAppVariable = 'blabla';

   var myAppFunction = function() {
       // Doing a few things here
   };

   return myAppFunction;
}) (jQuery);

// Using the module
myApplication.myAppFunction();

To me it is very confusing because I don't see how it prevents me for also stepping on other's toes.

But you're not following the pattern: you do a conditional assign, then immediately do an assign without checking. Assignment does precisely that; if you don't do anything to avoid stomping on your value, you don't do anything to avoid stomping on your value. What's the specific question? — Dave Newton, Oct 25 '13 at 14:35
@dave-newton I guess the specific question is how to avoid using myApplication if is already in used before (which I thought those Options were suppose to do)? Is there a short way to give an alternate name or something? — Iam Zesh, Oct 25 '13 at 14:39
Those options *do* do that. Then you turn around and overwrite it by doing a direct assignment. I don't understand what the confusion is. — Dave Newton, Oct 25 '13 at 15:43
@dave-newton Ok, then I guess the confusion is about how "not turning around and overwritting it by doing a direct assignment", how to do the assignment properly. — Iam Zesh, Oct 25 '13 at 15:58

score 0 · Answer 1 · answered Oct 25 '13 at 14:39

When you load a module in javascript, you're probably (depending on the code I guess) going to have to overwrite whatever variable is already in your modules namespace. A popular pattern for preserving whatever may have held your modules name before load is the noConflict() pattern. The idea behind this pattern is you hold the original value of your namespace in a variable and if noConflict is called, you replace your namespace with the original value and return your library. The pattern can be written more or less elegantly like this:

myModule = "some stuff ya";

(function(namespace, undefined) {
    var _module = "myModule";
    var __originalModule = namespace[_module];//holds the original value in case you wish to restore it

    /****** Code your module here following whichever module pattern you wish to follow ****/
    var module = {
        log: function() {
            if(console.log) {
                console.log(arguments);
            }
        }
    }
    /****** End of your module ****/

    //calling this method will remove your module from the namespace and replace it with whatever
    // originally held your module name.
    //This function returns your module
    module.noConflict = function() {
        namespace[_module] = __originalModule;
        return module;
    }

    namespace[_module] = module; //add your module to the namespace

})(window);

console.log(window.myModule); // => {log: function...}
var myMod = window.myModule.noConflict();
console.log(window.myModule); // => "some stuff ya"

Check the existence of variable in the global namespace without alternate name

1 Answers1