this is "Advanced JavaScript" article series. In this series we have learned many beautiful concepts of JavaScript. If you are very new to this series then please have a look at the previous articles.
The following are links to all the articles.
In this article we will learn the concept of namespaces in JavaScript. If you are a C# developer then you might understand the concept of namespaces very well. If not then the following is a small introduction for you.
Problem without namespace
In this example we will define two functions that will share the same name. Have a look at the following example, we have defined fun1( ) two times and then we are calling fun1() and we are seeing that the latest function is executied.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script>
function fun1() {
console.log("This is fun1");
}
function fun1() {
console.log("This is fun2");
}
fun1();
</script>
</body>
</html>
Here is sample output.
![Problem without namespace]()
Using a namespace to solve the problem
As we have explained earlier, a namespace solves the name collision problem. In this example we will share the same function name in more than one function but they will belong to different namespaces. Have a look at the following example:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<script>
var myfunctionCollection1 = {
fun1: function () {
console.log("This is fun1");
},
fun2: function () {
console.log("This is fun2");
}
}
var myfunctionCollection2 = {
fun1: function () {
console.log("This is fun1");
},
fun2: function () {
console.log("This is fun2");
}
}myfunctionCollection.fun1();
</script>
</body>
</html>
Here is sample output. We are seeing that the function 1 in the first namespace is executing.
![Use namespace to solve problem]()
Nested namespace
As in C# and some other languages, we can create a nested namespace in JavaScript. The depth of a nested namespace can be "n" times. In this example we are creating a sample of a nested namespace and then we are using a fully qualified name to call the function.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="backbone/Jquery.js" type="text/javascript"></script>
</head>
<body>
<script>
var myfunctionCollection = {
innerSection: {
fun1: function () {
console.log("This is fun 1");
},
fun2: function () {
console.log("This is fun 2");
}
}
}
//Calling to function
myfunctionCollection.innerSection.fun1();
</script>
</body>
</html>
![Nested namespace]()
Another style to implement namespace
This is another example to implement a namespace in JavaScript. We can alternatively use an immediately invoked function to implement a namespace.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="backbone/Jquery.js" type="text/javascript"></script>
</head>
<body>
<script>
var myApp1 = {
name:'Sourav Kayal',
fun: function () {
console.log(this.name);
}
};
var myApp2 = {
name: 'Sourav Kayal',
fun: function () {
console.log(this.name);
}
};
(function () {
myApp1.fun();
myApp2.fun();
}).apply(myApp1,myApp2);
</script>
</body>
</html>
![Another style to implement namespace]()
Conclusion
In this example we have learned some concepts of JavaScript. Hope you have understood it and will implement it in your next JavaScript application. Happy coding.