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 different types of Namespaces in JavaScript. So, let’s start!
JavaScript Namespace
The concept of adding classes, methods, variables, and objects inside a container is known as “Namespace” in JavaScript. The code you write in a JavaScript program and the predefined methods are stored in the “window” variable, considered a “Global namespace“. This window namespace is utilized whenever a new variable is created. Also, storing any value in the newly created variable will use its namespace. This is how the hierarchy works in JavaScript.
Types of Namespaces in JavaScript
JavaScript supports two types of Namespaces:
- Static Namespace
- Dynamic Namespace
We will discuss both of the mentioned Namespaces types in detail.
Static Namespace in JavaScript
When a “Namespace label” is hardcoded and a function is defined inside it, it is known as “Static Namespace“. It permits the reassignment of the namespaces; however, a static namespace will always refer to the same old JavaScript objects.
The Static Namespaces in JavaScript are divided into the below-given categories:
- Static Namespace with Direct Assignment
- Static Namespace with Object Literal Notation
- Static Namespace with Module Pattern
Now, let’s understand the functionality of each of the given types of Static Namespace.
Static Namespace with Direct Assignment
In “Direct Assignment”, functions are defined using the already created static namespace. For instance, in the following example, we will create an object named “student,” which acts as a static namespace:
After doing so, we will define two functions “getName()” and “getAge()” and associate them with the “student” namespace:
student.getName = function() {
var name = “Alex”;
return name; }
student.getAge = function() {
var age= 35;
return age; }
console.log(student.getName());
console.log(student.getAge());
As functions are directly assigned to the “student” namespace, it will result in the following output:
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/types-of-namespaces-in-javascript-01.png" data-lazy- height="382" src="data:image/svg xml,” width=”840″>
Static Namespace with Object Literal Notation
In this type of static namespace, functions are added within the namespace at object declaration.
In the below-given program, we have used the object literal notation to define a static namespace “student” and add the “getName()” and “getAge()” function within its scope:
var student= {
getName: function() {
var name = “Alex”;
return name; },
getAge: function() {
var age= 35;
return age; }
};
console.log(student.getName());
console.log(student.getAge());
Output
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/types-of-namespaces-in-javascript-02.png" data-lazy- height="450" src="data:image/svg xml,” width=”838″>
Static Namespace with Module Pattern
The JavaScript “module pattern” utilizes a function wrapper that returns an object. The returned object refers to the logic of the module public interface within the global scope.
This type of static namespace invokes the function, saves the returned value to the namespace variable, and locks the module API within the namespace scope. The variables not included in the return value are kept private and only accessible to the function that refers to them.
Example
We will now define “student” as a static namespace and wrap it in a function:
var student= (function() {
return {
getName: function() {
var name = “Alex”;
return name;
},
getAge: function() {
var age= 35;
return age;
}
}; })();
console.log(student.getName());
console.log(student.getAge());
The value returned by the “getName()” and “getAge()” methods will be saved to the created static namespace variable:
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/types-of-namespaces-in-javascript-03.png" data-lazy- height="530" src="data:image/svg xml,” width=”838″>
Dynamic Namespace in JavaScript
Instead of hardcoding a namespace label, a “Dynamic Namespace” is referenced within the function wrapper. This type of namespace eliminates the requirement to combine the return value to assign these values to the defined namespace. It is mostly utilized in situations where multiple independent instances of a module are created in different instances.
Dynamic Namespace can be implemented in JavaScript by passing the namespace as an “argument” or defining it with the “apply” keyword.
Let’s understand both procedures one by one.
Passing Dynamic Namespace as an argument
JavaScript permits you to create a dynamic namespace by passing it as an argument to the self-invoking function. These functions are defined with the help of the passed argument.
For example, we will create a “student” namespace and pass it as an argument “std”. After that, we will define the “getName()” and “getAge()” functions by utilizing the “std” argument:
var student= {};(function(std) {
std.getName = function() {
var name = “Alex”;
return name;
};
std.getAge = function() {
var age= 35;
return age;
}
})(student);
console.log(student.getName());
console.log(student.getAge());
Execution of the above-given program will show the following output:
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/types-of-namespaces-in-javascript-04.png" data-lazy- height="520" src="data:image/svg xml,” width=”838″>
Creating Dynamic Namespace with apply keyword
Another method to create a dynamic namespace is to use the “apply” keyword and pass it as an argument. After doing so, add the required functions with the “this” keyword.
Example
var student= {};(function() {
this.getName = function() {
var name = “Alex”;
return name;
};
this.getAge = function() {
var age = 35;
return age;
}
}).apply(student);
console.log(student.getName());
console.log(student.getAge());
Output
<img alt="" data-lazy- data-lazy-src="https://kirelos.com/wp-content/uploads/2022/04/echo/types-of-namespaces-in-javascript-05.png" data-lazy- height="518" src="data:image/svg xml,” width=”838″>
That was all essential information regarding the types of Namespaces in JavaScript. You can further research as required.
Conclusion
The Static namespace type hardcodes the namespace label and defines functions within, and the Dynamic namespace type is referenced within the function wrapper. In JavaScript, the Static namespace is created with direct assignment, object notation, and module pattern. In contrast, a Dynamic namespace is defined by passing it as an argument or using the apply keyword. This post discussed the types of namespaces in JavaScript.
About the author
<img alt="" data-lazy-src="https://secure.gravatar.com/avatar/c73b74cd8044d2e9b300610f5af77d0b?s=112&r=g" data-lazy- height="112" src="data:image/svg xml,” width=”112″>
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.
