What’s the best practice of JS namespacing? (C# like)

JavsScript is a loosely typed language which let you modify any of your objects anytime, anyhow, in whatever structure you want. It doesn’t ask you to structure your code. You can put everything in global namespace, override whatever variable you want. This is why namespacing your code is much more needed.

What’s Namespacing… in JS?

Namespacing is putting your variables, methods, classes, objects in a container. In JavaScript whatever code you write and also the predefined methods are inside the “window” variable; which can be considered as global namespace. Whenever you create a variable in belongs to the window namespace. And anything inside your newly created variable will consider that variable as their namespace. The entire hierarchy will go like that only.

Why namespace in JavaScript is necessary?

Well for very small app you may not find any requirement but if your app is mid or large, you may face the following issues if you don’t namespace your code.

  1. If everything is under window variable or global namespace, there are chances someone else’s code will override your variables. In compiled languages you will get an compilation error if you face similar situation; but in JavaScript, you will just see your code not working and also not throwing any error.
  2. Even after using plugins in your IDE it become harder to find suggestions, as you’ve messed up everything by putting all your stuffs inder one namespace.
  3. While nameing your next variable you have to think or search hard if something of the same name is already exist.
  4. This is really a bad practice to put everything in the global namespace.

Why it’s a problem to namespace in JavaScript?

Well, I won’t say that the problem is in JavaScript, but in human mentality and situations. I believe a bad practice was continued. May be you will agree to some of the points below.

  1. In other languages, who are strongly typed, somewhat forces you to namespace everything. JavaScript is little submissive in this case.
  2. There are IDEs like Visual Studio who automatically creates namespaces using conventions. But JavaScript doesn’t have great IDEs like Visual Studio.
  3. JavaScript was started just to make some manipulation in an HTML page. People also started working on JavaScript just for that. Thus no one felt the need of doing stuffs in namespaces and this bad practice continues even after JavaScript is evolved like any other modern language.

C# style namespace in JavaScript

First declare the Namespace. Make sure it points to a valid object. If the object doesn’t exist, create it. That’s what I exactly did in the first line.

In the second line I gave my object a name. In c# you declare the classes; but in JavaScript everything is an object. Though you can create constructors also, but here I’m taking objects for example.

I’m passing the Namespace and the objName to the function, and inside the function whatever you declare with var will become private, and anything with customObj. will become public (closure).

Thus, every variable you declare, every method you expose will belong to Namespace.objName and can be accessed by the same.

After completing all my stuffs I’m setting the Namespace and objName as null; to avoid any reference conflict with other files/objects as both of them are global.

A similar approach is Injecting Scope

How to provide dependencies

Very often you have to provide dependencies to them; cause you will be working with multiple namespaces in different files. In the above two approaches of namespacing, you have to pass the dependencies while executing the function only (already shown in the examples). The reason why you shouldn’t use the dependent objects directly is because in case someone changed some, name or contract or something in his file, you also have to change code in your ones. Make sure whenever you pass a dependency, that should already be there in the page.

Advantage of these approaches

  1. Namespace and objectName are declared separately. If you follow this approach for every single .js files in your app, you will have the feeling like c#.
  2. Giving your variables and methods a private scope.
  3. A cleaner code structure.

A Demo project

A small demo project is attached here. You can check it for reference.

About This Author

Hello! I am Paul Shan, a JavaScript Expert, Full Stack and DevOps Engineer cum Consultant based out of Bengaluru, India.

  • Anupam Singh

    Nice share Paul.