An Interest In:
Web News this Week
- April 1, 2024
- March 31, 2024
- March 30, 2024
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
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
Thanks For the read, hope you learned something :)
Found my grammatical mistakes, haha comment them down
Original Link: https://dev.to/himanshutiwari15/namespacing-in-javascript-5g82
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To