Namespace in JS

Muhammad Ridwan — Sat, 01 Sep 2018 13:48:38 +0000

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

    function fun1() {
        console.log("I am first fun1");

    }
    function fun1() {
        console.log("I am second fun1");
    }
    fun1();

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

   var myfunctionCollection1 = {
        fun1: function () {
              console.log("I am first fun1");             
        }        
   }
    var myfunctionCollection2 = {
        fun1: function () {
              console.log("I am second fun1");

        }
   }
    myfunctionCollection1.fun1();
    myfunctionCollection2.fun1();

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

   (function() {
   function fun1(){
   console.log("I am first fun1");
   } fun1();
   }());

   (function() {
   function fun1(){
   console.log("I am second fun1");
   } fun1();
   }());

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

 {
  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.

Output:
I am first fun1
I am second fun1

I hope you enjoyed this article.
Regards.

DEV Community: Muhammad Ridwan

Namespace in JS

Problem without namespace

Using a namespace to solve the problem

1.Using Object Literal Notation

2.Using IIFE (Immediately invoked function expression)

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