jQuery namespacing using objects and self executing anonymous functions

jquery, namespaces

Solution

My first answer tried to address your original questions and show how to set up a namespace. Instead of adding to that answer, I decided to add a second answer to address the questions in your comment to my first answer.

Global variables are really properties of the `window` object. If you use `var` outside of a function, you are defining a global variable. If you use `var` inside a function, you are defining a local variable. If you reference a variable `someValue` without declaring it with `var`, it is the same as referencing `window.someValue`.

The following code shows the different ways to set a global variable, and the one way to define a local variable.

window.global1 = 'abc';
global2 = 'def';
var global3 = "ghi";

(function() {
    window.global4 = 'jkl';
    global5 = 'mno';
    var local1 = 'xyz';
})();

console.log(global1); // 'abc'
console.log(global2); // 'def'
console.log(global3); // 'ghi'
console.log(global4); // 'jkl'
console.log(global5); // 'mno'
console.log(local1);  // ReferenceError: local1 is not defined

In general, you want to limit setting global variables (at least when creating a JavaScript library). A namespace is basically just a global variable. When you place everything else under that namespace, you have added only a single global variable.

I think it is also a best practice to avoid setting global variables like `global2` and `global5` above. Instead, you should use `var` oustide of a function (like `global3`) or set a property on the `window` object (like `global1` and `global4`).

Borrowing the code example from my other answer, we can create a namespace like this:

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

    function privateFunction() {
        return privateValue;
    }

    return {
        publicValue: 'xyz',

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

We could have achieved the same by doing the following, but I consider this bad style:

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

    function privateFunction() {
        return privateValue;
    }

    myApp = {
        publicValue: 'xyz',

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

In both cases we have set up the `myApp` global variable, but I think it is much clearer in the former than in the latter.

Just to be clear, in both cases we would address the public variable as `myApp.publicValue` and call the public function using `myApp.publicFunction()`, and outside of the anonymous function we would not be able to reference `privateValue` or `privateFunction`.

Problem

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; } })(); ```

Original source