Understanding the namespacing used in YUI examples.js

// Step 1. simple assignment and retrieval
// set
var x = "Hello, world";

// get
alert(x);

// Step 2. object property assignment and retrieval
var x = {
    foo: "Hello, world"
};

alert(x.foo);

// Step 3. assignment of value from a function
function makeX() {
    return "Hello, world";
}
var x = makeX();
alert(x);

// Step 4. assignment of object from a function
function makeX() {
    return {
        foo: "Hello, world";
    };
}
var x = makeX();
alert(x.foo);

// Step 5. Adding a property to an object
var x = {
    foo: "Goodbye, world"
};

x.bar = "Hello, world";
alert(x.bar);

// Step 6. Adding an object to another object (aka, namespace)
var x = {
    foo: "Goodbye, world"
};

x.bar = {
    message: "Hello, world"
};
alert(x.bar.message);

// Step 7. Adding a property to an object (aka, namespace) by function
function makeX() {
    return {
        message: "Hello, world"
    }
}
var x = {
    foo: "Goodbye, world"
};

x.bar = makeX();
alert(x.bar.message);

// Step 8. anonymous functions
var makeX = function () { // this is an anonymous function assigned to a variable
    return {
        message: "Hello, world"
    }
};
var x = {
    foo: "Goodbye, world"
};

x.bar = makeX(); // works the same as a "declared" function

alert(x.bar.message);

// Step 9. immediately executed anonymous functions
var bar = (function () {
    return {
        message: "Hello, world"
    }
})(); // <-- note the parens at the end

var x = {
    foo: "Goodbye, world"
};
x.bar = bar; // bar contains the object already because the function was executed

alert(x.bar.message);

// Step 10. adding an object to another object (aka namespace) by immediately executed anonymous function
var x = {
    foo: "Goodbye, world",
    bar: (function () {
        return {
            message: "Hello, world"
        }
    })() // <-- note the closing parens.  The function returns an object which is then assigned to the property bar
};

alert(x.bar.message);

// Step 11. vars declared inside functions aren't visible outside that function
function makeX() {
    var youWontSeeMe = "This variable will not be exposed unless it's in the return statement, which it isn't";

    return {
        message: "Hello, world"
    }
}

var x = {
    foo: "Goodbye, world"
    bar: makeX()
};

alert(x.bar.message);
alert(x.bar.youWontSeeMe); // undefined.  The var wasn't in the function's return
alert(youWontSeeMe); // BOOM!  Runtime error, the name youWontSeeMe only exists inside makeX

// Step 11. sharing hidden function vars by putting them in the return statement
function makeX() {
    var message = "Hello, world";

    return {
        someOtherName: message
    };
}

var x = {
    foo: "Goodbye, world",
    bar: makeX()
};

alert(x.bar.someOtherName);
alert(x.bar.message); // undefined because the object returned used property name someOtherName

// Step 12. putting it all together
YAHOO.example.MyNamespace = (function () {

    ...
    var myDataTable = new YAHOO.widget.DataTable(...);

    return {
        dt: myDataTable
    }
})();

alert(YAHOO.example.MyNamespace.dt); // the DataTable instance
alert(YAHOO.example.myDataTable); // undefined because the anonymous function returned the DataTable under the property name dt

// Variations on this theme
// A. Wrapping the property assignment in an immediately executing anonymous function
(function () {
    ...
    var myDataTable = new YAHOO.widget.DataTable(...);

    YAHOO.example.MyNamespace = {
        dt: myDataTable
    };
})();

// B. NOT RECOMMENDED, using Constructor invocation to create and immediately
// instantiate an anonymous class
YAHOO.example.MyNameSpace = new function () {  // <-- note the *new*
    // In an anonymous class, as in any class, *this* refers to the instance object
    ...
    var myDataTable = new YAHOO.widget.DataTable(...);
    this.dt = myDataTable;
    // new Foo() returns the object known as *this* inside the class function
    // automatically so no return statement is needed
});  // <-- note parens are optional


// Final note
/*

The YUI library Does use one global variable YAHOO.  Everything is hung off that
object.  YAHOO is available everywhere on the page inside or outside of
functions.  Since all our stuff is hung on that global, that means anywhere in
your code after the code in step 12 runs you can access the DataTable (and any
other things exposed in the anon function's return statement) via
YAHOO.the.namespace.where.you.put.your.stuff.

*/