Namespace in JavaScript

In this article we will learn the concept of namespace in JavaScript. If you are C# developer then you might know the concept of namespace very well. If not then the small introduction is for you.

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.