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.