DEV Community

Cover image for Namespacing in JavaScript
Himanshu Tiwari ๐ŸŒผ
Himanshu Tiwari ๐ŸŒผ

Posted on

Namespacing in JavaScript

One of the most confusing things in JavaScript, I found was namespacing. So, I learned about it and thought to share the notes with everyone who is confused about it.

When we make applications and as our application grows and becomes more complex, it is likely that at some point two variables or functions will end up having the same name, resulting in conflict.

To avoid this we can make use of namespaces, which will create a local scope for our variables and functions. Javascript doesn't actually have namespaces like other programming languages, so what we'll see there are alternative ways of achieving the same outcome. The most common way of simulating namespaces is via objects.

Let's talk about some approaches which you can often use and often see others using it

1. By Direct Assignment

var webApp = {}

webApp.id = 0;

webApp.next = function() {
    return webApp.id++;  
}

webApp.reset = function() {
    webApp.id = 0;   
}

Enter fullscreen mode Exit fullscreen mode

Note that the names "id" or "next" are generic names that could easily be repeated many times in a large web application. Instead of adding more words to our variables, like "idOfwebApp", and making them separate in the global scope, we place them inside an object that will hold all information about our web app.

So, let's break the above code for this example and you will automatically understand for others below.
If we take a close look here, then what is happening is, it is acting as an object having a key named id and 2 functions.
If we write

console.log(webApp.next());
//output will be 0 itself, just like an object.
Enter fullscreen mode Exit fullscreen mode

You can use this instead of using the same big long names

2. Using Object Literal Notation

var webApp = {

    id: 0,

    next: function() {
        return this.id++;   
    },

    reset: function() {
        this.id = 0;    
    }
}
Enter fullscreen mode Exit fullscreen mode

This is the most common thing we often see, the most common namespacing we basically use.

3. The Module Pattern

var webApp = (function() {

    var id= 0;

    return {
        next: function() {
            return id++;    
        },

        reset: function() {
            id = 0;     
        }
    };  
})(); 
Enter fullscreen mode Exit fullscreen mode

This is where things turn tricky!!!
Everything must be clear to you but what that "();" is representing is -- self-invoking function.

So Why Module approach over Object Litteral

Object literal notation is rigid โ€“ it's all about property assignments, with no room for supporting logic. Moreover, all properties must be initialized and property values cannot easily cross-reference one another. The module pattern suffers none of these constraints and gives us the added benefit of privacy.

Conclusion

The use of the Module Approach is flexible for big Projects and can be used whereas the Object approach is better for mini-projects and addons less complexity.

Further Read

Thanks For the read, hope you learned something :)
Found my grammatical mistakes, haha comment them down

Top comments (12)

Collapse
 
matjones profile image
Mat Jones

You can achieve the same effect without the use of immediately invoked function expressions using ES6 modules. Or even better, if youโ€™re using TypeScript, you can just use the namespace keyword (TypeScript fanatic here).

Collapse
 
himanshutiwari15 profile image
Himanshu Tiwari ๐ŸŒผ • Edited

Thanks for the information dude
Would love if you can share any resource for my help and I don't know much about typescript ๐Ÿ˜…๐Ÿ˜ฅ

Collapse
 
matjones profile image
Mat Jones

You can read generally about the module specifications here, for full browser support youโ€™d need to use a bundler like Parcel, Webpack, Rollup, etc.

TypeScript adds a namespace keyword which is essentially just syntax sugar that compiles to JavaScript modules namespaced via the ES6 module system, or if you need full browser support and are compiling to ES5, itโ€™ll compile to a method similar to what youโ€™ve shown above. You can read more about TypeScript namespaces here

Thread Thread
 
himanshutiwari15 profile image
Himanshu Tiwari ๐ŸŒผ

Thanks for your time and references

Thread Thread
 
ptrjsn profile image
Peter Johnson • Edited

Mat - Do you have to use a bundler, or just go through some sort of server? I understood the latter, but not tried it w/o a bundler so I can't say for sure. Once it gets out of the bundler, it probably won't be a module anyway.

Also, where did you get your user pic here? I've been looking to create one of my own & I like that style.

Thread Thread
 
matjones profile image
Mat Jones

In an environment that supports ES6 natively (so, Node.js Server, Chrome, or Firefox) you donโ€™t need a bundler, you can use ES6 modules natively.

Also, here

Collapse
 
ptrjsn profile image
Peter Johnson

The TypeScript site has a really good, simple Migrating from JavaScript guide that will get you started with TypeScript. There are lots of JavaScript "improvement" languages out there, but TypeScript seems to have caught on like no other; it's the 4th most popular languge in GitHub as of last year.

Thread Thread
 
himanshutiwari15 profile image
Himanshu Tiwari ๐ŸŒผ

wow, so much information dude
Thanks

Collapse
 
yamini8750 profile image
Yamini-8750

okay that's something really helpful cheers๐Ÿ’ฅ๐Ÿ’ฅ

Collapse
 
himanshutiwari15 profile image
Himanshu Tiwari ๐ŸŒผ

Thanks, happy it helped

Collapse
 
gouravsingh2580 profile image
Gourav Singh

There's a much better & simpler way to do it without using namespacing. Use const while declaring further iteration instead of var or let.

Collapse
 
himanshutiwari15 profile image
Himanshu Tiwari ๐ŸŒผ • Edited

Thanks you took time to comment and have read
But I think that declaring const every time will result in many number of variables and that becomes harder for me to handle.
BTW good to know your thoughts