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
Thanks For the read, hope you learned something :)
Found my grammatical mistakes, haha comment them down
Top comments (12)
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).Thanks for the information dude
Would love if you can share any resource for my help and I don't know much about typescript π π₯
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 hereThanks for your time and references
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.
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
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.
wow, so much information dude
Thanks
okay that's something really helpful cheersπ₯π₯
Thanks, happy it helped
There's a much better & simpler way to do it without using namespacing. Use const while declaring further iteration instead of var or let.
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