JQuery namespacing using objects and self-executing anonymous functions

Question

I am looking for creating a namespace using objects and self-executing anonymous functions. Which one is considered the best option?

Using objects gives a unique name "myAppName" to prevent conflicts?

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

Using a spontaneous 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 the self-emitting function, they all seem to be executing. Does it make sense to use and not use var in front of variable and function names? I do not quite understand. Is there a way to make variables and functions private and public? or is everything inside one's own function personal?

What happens if I use 'var' before the self execute function, as shown below?

 var myAppName = (function () { val1 = "abc"; var val2 = "xyz"; myFunc1 = function() { return val1; } var myFunc2 = function() { return val2; } })(); 

Answer 1

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

Global variables are really properties of the window object. If you use var outside the function, you define a global variable. If you use var inside a function, you define a local variable. If you reference the variable someValue without declaring it with var , it matches the link window.someValue .

The following code shows various ways to set a global variable and 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 the setting of global variables (at least when creating the JavaScript library). A namespace is just a global variable. When you place everything else in this namespace, you have added only one global variable.

I think it is also better to avoid setting global variables like global2 and global5 above. Instead, you should use var oustide functions (e.g. global3 ) or set a property in a window object (e.g. global1 and global4 ).

Borrowing sample code 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 achieve the same by doing the following, but I find 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 set the global variable myApp , but I think it is much clearer in the first than in the last.

To be clear, in both cases we will consider the public variable as myApp.publicValue and call the public function using myApp.publicFunction() , and outside of the anonymous function we will not be able to refer to privateValue or privateFunction .

Answer 2

Putting all your code under one namespace will certainly help avoid name conflicts. If you have a collision, it will be much easier for you to change the code to deal with it.

Your first code example is good if everything should be publicly available. If you want some things to be private, use an anonymous, immediately executed function, for example:

 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 containing public variables and functions. If you do not put "var" before "privateValue", then you do not define a local variable; Instead, you are referencing a global variable (which is indeed 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); 

That way you can use $() instead of jQuery() . You can also treat undefined as a constant. You can also more easily deal with a situation where someone has redefined a window object.