Javascript Organizing code with namespace in JavaScript

Organizing code with namespace in JavaScript

A. Preface:

Sometime, we want to use functions or properties globally. But when there are too much global variables, they may be bring a lot of trouble - naming collisions. We can use namespace to minimize number of variables. There are many solution to implement namespace, we’ll cover some simple approaches which are easy to use and understand :D

B. Namespace:

B.1. Use an object as a namespace:

// Create global namespace MYAPP
var MYAPP = MYAPP || {};

// Put function into namespace
MYAPP.sayHello = function () {


Why var MYAPP = MYAPP || {} ?

Let take a look at line 2 : why we use var MYAPP = MYAPP || {} instead of var MYAPP = {} ?

We may write many javascript files, and then combine them or not. There is a good chance that a namespace is defined in many files. So we must ensure that the namespace object in the other javascript files is not damaged.


In english.js:

// Create global namespace MYAPP
var MYAPP = {};

// Put function into namespace
MYAPP.english = {};
MYAPP.english.sayHello = function () {
    alert("[english namespace] Hello!");


In vietnamese.js:

// Create global namespace MYAPP
var MYAPP = {};

// Put function into namespace
MYAPP.vietnamese = {};
MYAPP.vietnamese.sayHello = function () {
alert("[vietnamese namespace] Xin chao!");


And then combine them in NameSpaceExample.html

<html xmlns="">
<title>Namespace Example</title>
<script src="english.js" type="text/javascript"></script>
<script src="vietnamese.js" type="text/javascript"></script>


We’ll get error at line 7 MYAPP.english.sayHello(); Now we just need to change small code

var MYAPP = {}; >>> var MYAPP = MYAPP || {};
MYAPP.english = {}; >>> MYAPP.english = MYAPP.english || {};
MYAPP.vietnamese = {}; >>> MYAPP.vietnamese = MYAPP.vietnamese || {};


B.2. Private/ Public method property and self-executing method

In C#, Java,… we alway have property modifier such as: public, private, protected. Now let’s implement it in javascript.

var MYAPP = MYAPP || {}

MYAPP.publicMethodExample = function () {

//private property
var userName = "Dang";

//private method
function toUpperName() {
return userName.toUpperCase();

//public method
return { sayHello: function () {
alert("Hello, " + toUpperName());
} (); // insert () to make self-executing function



The properties, methods in return will be public variable. One important thing to remember is putting () right after we define a function. It’ll make our function become a self-executing function (function execute immediately).

How our code works?

var MYAPP = function(){...} ();


First, the function is executed and return sayHello. Then sayHello will be assigned to MYAPP.

This post is licensed under CC BY 4.0 by the author.