Post
Ask Question

Namespace in JavaScript

Introduction

 
This is the "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 executed.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. </head>  
  5. <body>  
  6.     <script>  
  7.         function fun1() {  
  8.             console.log("This is fun1");  
  9.         }  
  10.         function fun1() {  
  11.             console.log("This is fun2");  
  12.         }  
  13.         fun1();  
  14.     </script>  
  15. </body>  
  16. </html>   
Here is the 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:
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. </head>  
  5. <body>  
  6.     <script>  
  7.        var myfunctionCollection1 = {  
  8.             fun1: function () {  
  9.                 console.log("This is fun1");  
  10.             },  
  11.             fun2: function () {  
  12.                 console.log("This is fun2");  
  13.             }  
  14.         }  
  15.         var myfunctionCollection2 = {  
  16.             fun1: function () {  
  17.                 console.log("This is fun1");  
  18.             },  
  19.             fun2: function () {  
  20.                 console.log("This is fun2");  
  21.             }  
  22.         }myfunctionCollection.fun1();  
  23.     </script>  
  24. </body>  
  25. </html>   
Here is a sample output. We are seeing that 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.
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script src="backbone/Jquery.js" type="text/javascript"></script>  
  6. </head>  
  7. <body>  
  8.     <script>  
  9.         var myfunctionCollection = {   
  10.             innerSection: {  
  11.                 fun1: function () {  
  12.                     console.log("This is fun 1");  
  13.                 },  
  14.                 fun2: function () {  
  15.                     console.log("This is fun 2");  
  16.                 }  
  17.             }   
  18.         }  
  19.         //Calling to function  
  20.         myfunctionCollection.innerSection.fun1();           
  21.     </script>  
  22. </body>  
  23. </html> 
 
Nested namespace
 
Another style to implement a namespace
 
This is another example to implement a namespace in JavaScript. We can alternatively use an immediately invoked function to implement a namespace
  1. <!DOCTYPE html>  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title></title>  
  5.     <script src="backbone/Jquery.js" type="text/javascript"></script>  
  6. </head>  
  7. <body>  
  8.     <script>   
  9.         var myApp1 = {  
  10.             name:'Sourav Kayal',  
  11.             fun: function () {  
  12.                 console.log(this.name);  
  13.             }  
  14.         };   
  15.         var myApp2 = {  
  16.             name: 'Sourav Kayal',  
  17.             fun: function () {  
  18.                 console.log(this.name);  
  19.             }  
  20.         };          
  21.         (function () {  
  22.             myApp1.fun();  
  23.             myApp2.fun();  
  24.         }).apply(myApp1,myApp2);           
  25.     </script>  
  26. </body>  
  27. </html> 
 
Another style to implement namespace
 

Conclusion

 
In this example, we have learned some concepts of JavaScript. I hope you have understood it and will implement it in your next JavaScript application. Happy coding.


Similar Articles