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;   
}

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.

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;    
    }
}

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;     
        }
    };  
})(); 

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

• Read More about Module Pattern

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