Namespace in JavaScript

There is no namespacing in JavaScript by default, but we can make one customized.

This article will discuss how to declare and execute namespace in our JavaScript code with different examples.

Namespace in JavaScript

In programming, due to scope problems, we usually faced naming collision problems when we were required to use the same identifier multiple times. The same variables or functions might be necessary for our code in different conditions.

We implement namespacing in our code to resolve and avoid that naming collision issue between identifiers. It will allow us to use the same naming variables in different namespaces.

Namespace Types in JavaScript

We can split the namespace of JavaScript into two parts, as mentioned below:

1. Static namespace
2. Dynamic namespace

Static Namespace Type in JavaScript

In Static namespace, we usually use hard-coded namespace labels. It can re-assign one namespace to another with the reference of the same old object as specified.

Dynamic Namespace Type in JavaScript

Instead of hard-coded labels, the Dynamic namespace is specified inside the function wrapper. We are not required to bundle up the return value to allocate to the namespace.

Let us create the scenario in which namespace would be required to get more clarity. Let’s suppose we need to use multiple functions with the same name.

<script>
const sayHello = () => {
  console.log("cat says hello");
};
const sayHello = () => {
  console.log("dog says hello");
};

sayHello();  //it will generate SyntaxError: Identifier 'sayHello' has already been declared
</script>

In the above JavaScript source, we have declared the sayHello() function multiple times, and those functions may execute different code statements. When we try to call sayHello(), it will generate a syntax error.

To avoid that naming collision problem, we will use a namespace to use both functions without any error.

Declare Namespace in JavaScript

We initialize objects globally containing variables and functions as properties of that objects. It will help us avoid naming collisions and not infect our global environment.

Example:

<script>
const cat = {
    bodyColor: "Black, White, Brown",
    sayHello: function () {
        console.log("cat says hello");
    },
    sayBye: function () {
        console.log("cat says bye");
    },
};
const dog = {
    bodyColor: "Black, White, Brown",
    sayHello: function () {
        console.log("dog says hello");
    },
    sayBye: function () {
        console.log("dog says bye");
    },
};
cat.sayHello();      //cat says hello
dog.sayHello();    //dog says hello
</script>

We have defined <script> tags in this HTML page source to use JavaScript code statements. Inside the <script> tag, we initialized two separate objects globally, cat and dog, which can contain multiple properties.

After that, we created the same name properties for both the objects like bodyColor, sayHello(), sayBye() . We assigned the string value to bodyColorproperties and different functions to sayHello() and sayBye() properties.

Functions can contain different code statements that we want to execute upon calling that function. Here we put the console.log() statements.

We call functions from a defined object with the help of a dot operator, and it will print the message in the default log report of browsers.

You can save the given HTML example with the .html extension and open it in any browser to check the output. You need to activate debugging mode of your browser by simply pressing F12 to see the logs report.