MOCKSTACKS
EN
Questions And Answers

More Tutorials









Javascript Namespacing

Namespace by direct assignment


antipattern 3 global variables

var setActivePage = function () {};
 var getPage = function() {};
 var redirectPage = function() {};

just 1 global variable, no function collision and more meaningful function names

var NavigationNs = NavigationNs || {};
 NavigationNs.active = function() {}
 NavigationNs.pagination = function() {}
 NavigationNs.redirection = function() {}

Nested Namespaces

When multiple modules are involved, avoid proliferating global names by creating a single global namespace. From there, any sub-modules can be added to the global namespace. (Further nesting will slow down performance and add unnecessary complexity.) Longer names can be used if name clashes are an issue:


var NavigationNs = NavigationNs || {};
 NavigationNs.active = {};
 NavigationNs.pagination = {};
 NavigationNs.redirection = {};

 // The second level start here.
 Navigational.pagination.jquery = function();
 Navigational.pagination.angular = function();
 Navigational.pagination.ember = function();

Context (this)


var person = {
 name: 'John Doe',
 age: 42,
 gender: 'male',
 bio: function() {
 console.log('My name is ' + this.name);
 }
};
person.bio();
var bio = person.bio;
bio(); 

Output

"My name is John Doe"
"My name is undefined"

In the above code, person.bio makes use of the context (this). When the function is called as person.bio(), the context gets passed automatically, and so it correctly logs "My name is John Doe". When assigning the function to a variable though, it loses its context.

In non-strict mode, the default context is the global object (window). In strict mode it is undefined.


this in constructor functions

When using a function as a constructor, it has a special this binding, which refers to the newly created object:


function Cat(name) {
 this.name = name;
 this.sound = "Meow";
}
var cat = new Cat("Tom"); 
cat.sound; 
var cat2 = Cat("Tom"); 
window.name; 
cat2.name; // error! cannot access property of undefined

Output

"Meow"
"Tom"


Conclusion

In this page (written and validated by ) you learned about Javascript Namespacing . What's Next? If you are interested in completing Javascript tutorial, your next topic will be learning about: Javascript Setters and Getters.



Incorrect info or code snippet? We take very seriously the accuracy of the information provided on our website. We also make sure to test all snippets and examples provided for each section. If you find any incorrect information, please send us an email about the issue: mockstacks@gmail.com.


Share On:


Mockstacks was launched to help beginners learn programming languages; the site is optimized with no Ads as, Ads might slow down the performance. We also don't track any personal information; we also don't collect any kind of data unless the user provided us a corrected information. Almost all examples have been tested. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. By using Mockstacks.com, you agree to have read and accepted our terms of use, cookies and privacy policy.