JavaScript Namespaces Overview

Ramakrishna Basagalla
Dec 02, 2015
3.7k
0
0
Blog

Namespace

Namespace will helps in organizing the code and distinguish the level of code.

In other language like C#, JavaScript does not provide namespace by default, but we can create namespace.

Syntax:

var RK = RK || {};
RK.myVariable = “Ramakrishna”;

Advantages of namespace:

Organize the code.
If we have 2 more number of function with the same name, we can differentiate using namespace.
Easily recognize the variables, functions (if we have included several JS functions in page, it will be difficult to identify the function from where it is coming, using Namespace we can easily recognize the function where it is defined).

Namespace Sample

Below sample I have created multilevel namespace, I am going to call the function using the Namespace.

MyCustomPage.js File

var RK = RK || {};
RK.MyCustomPage = RK.MyCustomPage || {};
RK.MyCustomPage.UserName = "Ramakrishna Basagalla";
RK.MyCustomPage.AlertUserName = function () {
alert(RK.MyCustomPage.UserName);
};

MyCustomPage.html file

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="MyCustomPage.js"></script>
</head>
<body>
<h1>Javascript Namespace Sample</h1> // Calling JS function using namespace
<button onclick="RK.MyCustomPage.AlertUserName()">Alert User Name</button>
</body>
</html>