jQuery namespacing using objects and self executing anonymous functions

Question

I am looking at creating namespace using objects and self executing anonymous functions. Which one is considered a better option?

Using objects, is giving a unique name 'myAppName' enough to prevent collisions?

var myAppName = { 
    val1: "abc", 
    val2: "xyz",
    myFunc1: function() {
      return this.val2;  
    }
}

console.log(myAppName.val1);  // abc
console.log(myAppName.myFunc1());  // xyz

Using self executing anonymous function:

(function () {
val1 = "abc";
    var val2 = "xyz";

    myFunc1 = function() {
        return val1;   
    }

    var myFunc2 = function() {
        return val2;
    }
})();

console.log(val1);  // abc
console.log(myFunc1());  // abc
console.log(myFunc2());  // xyz

In the above code for self executing function, they all seem to execute. Is there a meaning of using and not using var before the variables and function names? I don't quite get it. Is there a way to make the variables and functions private and public? or is everything inside the self executing function is private?

What happens if I use 'var' before the self executing function like below?

var myAppName = (function () {
val1 = "abc";
    var val2 = "xyz";

    myFunc1 = function() {
        return val1;   
    }

    var myFunc2 = function() {
        return val2;
    }
})();

Answer 1

Putting all of your code under a single namespace is certainly going to help avoid name collisions. If you do have a collision, it will be much easier to change your code to deal with it.

Your first code example is fine if everything needs to be public. If you want some things to be private, use an anonymous, immediately executed function, like this:

var myApp = (function() {
    var privateValue = 'abc'; // Don't forget "var" here.

    function privateFunction() {
        return privateValue;
    }

    return {
        publicValue: 'xyz',

        publicFunction: function() {
            return privateFunction();
        }
    }
})();

Notice how the anonymous function returns an object that contains the public variables and functions. If you don't put "var" before "privateValue", then you are not defining a local variable; Instead, you are referencing a global variable (which is really a property of the "window" object.)

If you are using jQuery, I recommend the following:

(function(window, $, undefined) {

    var myApp = (function() {
        var privateValue = 'abc'; // Don't forget "var" here.

        function privateFunction() {
            return privateValue;
        }

        return {
            publicValue: 'xyz',

            publicFunction: function() {
                return privateFunction();
            }
        }
    })();

    // Put myApp in the global scope.
    window.myApp = myApp; 

})(window, jQuery);

This way, you are safe to use $() instead of jQuery(). You are also safe to treat undefined as a constant. You can also more easily deal with the situation where someone has overridden the window object.