Namespace in JS
Tags: javascript, webdev, tutorial, beginners
Published: 2018-09-01 13:48:38

---
title: Namespace in JS
published: true
description: Namespace in Javascript using Object literal, IIFE, let & const 
tags: #javascript,#webdev,#tutorial,#beginner
---


Unfortunately JavaScript doesn’t provide namespace by default. So anything
(function, method, object, variable) we create in JavaScript is global and 
we continue polluting that global namespace by adding more to that.

JavaScript lack namespaces. However we can use Objects , IIFE  to create namespaces. 

Advantage of namespacing is that they organize JavaScript code, make JavaScript code maintainable, do not create unnecessary global variables and functions.

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.

JavaScript-Demo

<script>
        function fun1() {
            console.log("I am first fun1");
            
        }
        function fun1() {
            console.log("I am second fun1");
        }
        fun1();
</script>

Output:
I am second func1

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. Here look at the following two approaches:


1.Using Object Literal Notation
-------------------------------
Here we wrap variables and function inside Object literal which act as a namespace. We access wrapped variable and function through notation:

object_name.variable_name;
object_name.function_name();


JavaScript-Demo
<script>
       var myfunctionCollection1 = {
            fun1: function () {
                  console.log("I am first fun1");             
            }        
       }
        var myfunctionCollection2 = {
            fun1: function () {
                  console.log("I am second fun1");
               
            }
       }
        myfunctionCollection1.fun1();
        myfunctionCollection2.fun1();

</script>

 Output:

I am first fun1
I am second fun1


2.Using IIFE (Immediately invoked function expression)
------------------------------------------------------
An IIFE is an anonymous function contained within a pair of parenthesis and is invoked immediately. The pair of parenthesis creates a local scope for all the code inside of it and makes the anonymous function a function expression. This justifies the name“Immediately Invoked Function Expression”.

The outermost pair of parenthesis turns everything inside of it to an expression because parentheses can’t contain JavaScript statements. The other pair of parentheses after function definition invokes the function immediately. Let’s look at an example.


JavaScript-Demo
<script>
       (function() {
       function fun1(){
       console.log("I am first fun1");
       } fun1();
       }());
     
       (function() {
       function fun1(){
       console.log("I am second fun1");
       } fun1();
       }());
</script>

 Output:
I am first fun1
I am second fun1


3.Using a block and a let declaration (or a const declaration):
--------------------------------------------------------------

In ES5, you had to use a pattern called IIFE (Immediately-Invoked Function Expression) if you wanted to restrict the scope of a variable to a block. In ECMAScript 6, you can simply use a block and a let declaration (or a const declaration):

JavaScript-Demo
<script>
     {
      let temp= function fun1(){
      console.log("I am first fun1");
      } 
      temp();
     }
      //temp(): ReferenceError: temp is not defined.

     {
      let temp= function fun1(){
      console.log("I am second fun1");
      } 
      temp();
     }
      //temp(): ReferenceError: temp is not defined.
</script>

Output:
I am first fun1
I am second fun1


I hope you enjoyed this article.
Regards.