How do I declare a namespace in JavaScript?

Question

How do I create a namespace in JavaScript so that my objects and functions aren't overwritten by other same-named objects and functions? I've used the following:

if (Foo == null || typeof(Foo) != "object") { var Foo = new Object();} 

Is there a more elegant or succinct way of doing this?

Answer 1

I use the approach found on the Enterprise jQuery site:

Here is their example showing how to declare private & public properties and functions. Everything is done as a self-executing anonymous function.

(function( skillet, $, undefined ) {     //Private Property     var isHot = true;      //Public Property     skillet.ingredient = "Bacon Strips";      //Public Method     skillet.fry = function() {         var oliveOil;          addItem( "\t\n Butter \n\t" );         addItem( oliveOil );         console.log( "Frying " + skillet.ingredient );     };      //Private Method     function addItem( item ) {         if ( item !== undefined ) {             console.log( "Adding " + $.trim(item) );         }     } }( window.skillet = window.skillet || {}, jQuery )); 

So if you want to access one of the public members you would just go skillet.fry() or skillet.ingredients.

What's really cool is that you can now extend the namespace using the exact same syntax.

//Adding new Functionality to the skillet (function( skillet, $, undefined ) {     //Private Property     var amountOfGrease = "1 Cup";      //Public Method     skillet.toString = function() {         console.log( skillet.quantity + " " +                      skillet.ingredient + " & " +                      amountOfGrease + " of Grease" );         console.log( isHot ? "Hot" : "Cold" );     }; }( window.skillet = window.skillet || {}, jQuery )); 

The third undefined argument

The third, undefined argument is the source of the variable of value undefined. I'm not sure if it's still relevant today, but while working with older browsers / JavaScript standards (ecmascript 5, javascript < 1.8.5 ~ firefox 4), the global-scope variable undefined is writable, so anyone could rewrite its value. The third argument (when not passed a value) creates a variable named undefined which is scoped to the namespace/function. Because no value was passed when you created the name space, it defaults to the value undefined.

Answer 2

I like this:

var yourNamespace = {      foo: function() {     },      bar: function() {     } };  ...  yourNamespace.foo();