JavaScript

JavaScript Namespace

JavaScript “namespace” is a programming paradigm that is utilized for assigning scope to the identifiers such as variables and function names. It is used to prevent collisions between the same-named variables and functions. For instance, a JavaScript program requires creating the same name variable in a different context. In this situation, utilizing “namespace” isolates the contexts, permitting the same identifier to be used in other namespaces.

This post will discuss the usage of the JavaScript namespace with the help of appropriate examples. So, let’s start!

JavaScript namespace

In JavaScript, the concept of adding classes, methods, variables, and objects inside a container is known as “namespace“. The code you write in a JavaScript program and the predefined methods are stored in the “window” variable, which can be considered a “global namespace“. This window namespace is used whenever a new variable is created. Also, storing any value in the newly created variable will utilize its namespace. This is how the hierarchy works in JavaScript.

Is JavaScript namespace necessary

Here is the list of some of the issues that you may face in case of not using namespace in a JavaScript project:

  • If you have declared everything under the global or window namespace, then it is possible that someone else can override their functionality. In such a scenario, the other compiler languages display a compilation error. However, JavaScript will not throw any error, and your code will not work according to the added logic.
  • To name a new variable, you have to search carefully to check if another variable is already with the same name or not.
  • When everything is placed under one namespace, it becomes more difficult to find suggestions even after installing plugins in an Integrated Development Environment (IDE).
  • Lastly, it is not an ideal practice to add everything in a single global namespace.

Now, let’s demonstrate the method of using the JavaScript namespace.

How to use JavaScript namespace

To use namespace in JavaScript, you can create an “object” literal in the following way:

const vehicle = {

  start: () => {

    console.log('start the vehicle')

  },

  stop: () => {

    console.log('stop the vehicle')

  }}

In the above program, “start” and “stop” methods are namespaced under the “vehicle” object, and they are not polluting the “global object”.

Similarly, you can also associate the methods to an already created JavaScript object:

const vehicle= {}

vehicle.start = () => {

  console.log('start the vehicle')}

vehicle.stop = () => {

  console.log('stop the vehicle')}

In such a scenario, the methods are still accessible from the outside because of references to the “vehicle” object.

To completely hide the code from the outside, you can “wrap” the desired code within curly braces “{}”, inside an “independent” block:

{

  const start = () => {

    console.log('start the vehicle')

  }

  const stop = () => {

    console.log('stop the vehicle')

  }

}

Now, check out the procedure of using the same identifier in different JavaScript namespaces.

Example

We will now create an identifier “start” and associate it with the “truck” and “bus” objects. In this scenario the same identifier “start” is utilized in different namespaces by linking it with different global objects:

var truck= {

  start: function () {

    console.log("Truck in Started!");

  }

}

 

var bus = {

  start: function () {

    console.log("Bus is Started!");

  }

}

Next, we will invoke the “start()” function with both objects:

truck.start();

bus.start();

The given output signifies that both “truck” and “bus” successfully accessed the “start()” function:

Advantages of JavaScript namespace

Have a look at the following advantages of using the JavaScript namespace:

  • The JavaScript namespace usage protects and isolates the code from other applications.
  • It organizes the code, making it easy to read, understand, and change according to the requirements.
  • It avoids memory leakage.
  • If you want to use multiple functions with the same name, then distinguish them by utilizing the JavaScript namespace.
  • With the help of namespace, it becomes easy to recognize the variables and functions from where they are defined.

That was all essential information regarding the JavaScript namespace. You can further research as required.

Conclusion

JavaScript namespace is a concept of adding classes, methods, variables, and objects inside a container. It is a programming paradigm that is utilized for assigning scope to the identifiers, such as variables and functions name. Javascript namespace assists in preventing the collision between the same name variables and functions. This post discussed the usage of the JavaScript namespace with the help of appropriate examples.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.