Introduction to JavaScript Namespace
Today, we shall look into ‘JavaScript NameSpace’. While we are working on web applications using JavaScript functions and files, it would become difficult to challenge code. So to help us manage this code, we have a keyword ‘Namespace’ which will create mini objects of different modules or functionalities to make code readable. JavaScript does not provide Namespace by default but this functionality can be replicated. It is a container providing scope for set of identifiers, type names, functions or variables, and methods, etc. to prevent collisions among them. It can be created with ease, so with minor tweaks, a namespace can be created.
Syntax of JavaScript Namespace
First, we need to initialize an empty Namespace:
var <namespace> = { };Then to access variables in the namespace,
<namespace>.<identifier>Similar to Objects in JavaScript, we initialize and access this namespace as objects.
varsampleNamespace = {
function_one: function()
{
// body of code
},
function_two: function()
{
// body of code
}
};
...
sampleNamespace. function_one ();This Namespace functionality can be replicated by creating a global object which contains all functions and variables. In modern web applications, different libraries and components are used, so we should have namespace to avoid code ambiguity.
Example
Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Namespace</title>
</head>
<body>
<h1>Displaying content using JavaScript Namespace</h1>
<script>
var employee = {
company: function () {
document.write("Kartik is an employee working in ");
}
}
var employer = {
company: function () {
document.write("Hetero Pharmaceutical Company");
}
}
employee.company();
employer.company();
</script>
</body>
</html>Output:
Types of Namespaces
We have two types of namespaces divided as ‘Static Namespace’ and ‘Dynamic Namespace’
- Static Namespace: Here, JavaScript namespace is hardcoded and functions are written within. One namespace can be reassigned to another but finally would refer to same old objects
- Dynamic Namespace: Here, JavaScript namespace is referenced inside the function wrapper instead of hard coding. We need not bundle up return values to assign namespaces.
We shall see how it works with below-given examples
1. Static Namespace with Direct Assignment
Namespace name can be and functions can be created using namespace.
Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Namespace</title>
</head>
<body>
<h1>Static Namespace with Direct Assignment</h1>
<script>
var employee = {}
employee.getEmployeeName = function() {
varemployeename = "Karthick lives in ";
return employeename;
}
employee.getEmployeeAddress = function() {
varemployeeaddress = "MVP Colony, Sector-8 Rushikonda Road";
return employeeaddress;
}
document.write(employee.getEmployeeName());
document.write(employee.getEmployeeAddress());
</script>
</body>
</html>Output:
2. Namespace with Object Literal Notation
Here, JavaScript namespace can be defined only once and write functions within the defined namespace.
Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Namespace</title>
</head>
<body>
<h1>Namespace with Object Literal Notation</h1>
<script>
var employee = {
getEmployeeName: function() {
varemployeeName = "Varun Kumar lives in ";
return employeeName;
},
getEmployeeAddress: function() {
varemployeeAddress = "Chicago, USA";
return employeeAddress;
}
};
document.write(employee.getEmployeeName());
document.write(employee.getEmployeeAddress());
</script>
</body>
</html>Output:
3. Namespace with Module Pattern
A namespace allows its logic to be withing global scope by function wrapper which returns an object representing modules public interface. Immediately invokes the function and assign the result to a namespace variable.
4. Supplying a Namespace Argument
This Namespace comes under dynamic namespacing also known as namespace injection. It is represented by a proxy which is referenced directly inside function wrapper. Here, we shall pass namespace as an argument to self-invoking functions.
Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Namespace</title>
</head>
<body>
<h1>Supplying namespace as argument</h1>
<script>
var employee = {};
(function(employer) {
employer.getemployeeName = function() {
var name = "Saideep living in ";
return name;
};
employer.getemployeeAddress = function() {
var address = "Quebec, Canada works with ";
return address;
};
employer.getemployeeLOB = function() {
var LOB = "IBPM";
return LOB;
}
})(employee);
document.write(employee.getemployeeName());
document.write(employee.getemployeeAddress());
document.write(employee.getemployeeLOB());
</script>
</body>
</html>Output:
5. Creating namespace with Keyword ‘apply’
It can be created using ‘apply’ with which we will implement using ‘this’ keyword. The namespace will be injected using ‘this’ keyword which is static and cannot be modified.
Moreover, ‘apply’ API is used to separate context and arguments.
Code:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Namespace</title>
</head>
<body>
<h1>Namespace with 'apply' keyword</h1>
<script>
var employee = {};
(function() {
this.getemployeeName = function() {
var name = "Narnia <br/>";
return name;
};
this.getemployeeAddress = function() {
var address = "Quebec, Canada <br/>";
return address;
};
this.getemployeeLOB = function() {
var LOB = "Information technology <br/>";
return LOB;
}
}).apply(employee);
document.write(employee.getemployeeName());
document.write(employee.getemployeeAddress());
document.write(employee.getemployeeLOB());
</script>
</body>
</html>Output:
Advantages of JavaScript Namespace
- JavaScript namespace provides isolation and protects from other JavaScript code working on web applications.
- On defining a namespace, ‘overwriting’ of the same variables which we might not be aware of.
- Usage of Namespace makes JavaScript code more structured and easier to read or understand and modify accordingly.
- As we are using namespace functions and definitions, the script of the web page should be kept above the page markup so that references and objects created are available immediately when the page loads.
- The namespace will avoid memory leakage.
Conclusion
With this, we can conclude our topic ‘JavaScript Namespace’.We have seen what JavaScript Namespace and its advantages in our daily programming is to make code more structured and reliable. With this, we can avoid code ambiguity and lessen the risk of naming collisions. Without polluting global namespace, It can be used. Also have seen two different types of Namespacing, Static and Dynamic Name Spacing Illustrated a few basic examples for your understanding. Hope this course will help you, people, to use Namespace in your upcoming assignments.
Recommended Articles
This is a guide to JavaScript Namespace. Here we also discuss the introduction and types of namespaces along with different examples and its code implementation. You may also have a look at the following articles to learn more –
