JavaScript | Modules

10 Oct, 2019
In the previous article on closures in javascript, we learned that Closure is one of the most important yet most misunderstood concepts in Javascript. The closure is a methodology in which a child function can keep the environment of its parent scope even after the parent function has already been executed, we can say it otherwise to remember or recreate the scope and its members that already has been executed once.
Now JavaScript modules are the best implementation of Closure. Modules are small units of independent, reusable code that is desired to be used as the building blocks in creating a non-trivial Javascript application. Modules let the developer define private and public members separately, making it one of the more desired design patterns in JavaScript paradigm. You may see modules as Classes as in any other Object-Oriented Programming Language.
Note: In ES2015, the class keyword was used to define classes in Javascript, but even though JavaScript still stands tall to be a classless programming language while ES2015 classes are basically special functions.
Coming back to Modules let us first see one example to see what Modules can do, we will try to simulate the behavior of a Rectangle Class giving in the length of two sides and getting back the area.
<script>// This is a Rectangle Module. function Rectangle() {     var length, width;       function create(l, w)     {         length = l;         width = w;     }       function getArea()     {         return (length * width);     }       function getPerimeter()     {         return (2 * (length + width));     }       // This is the object to consist public members.     // The rest are private members.     var publicAPI = {         create : create,         getArea : getArea,         getPerimeter : getPerimeter     };       // To be returned upon creation of a new instance.     return publicAPI; }   // create a Rectangle module instance var myRect = Rectangle(); myRect.create(5, 4); document.write("Area: " + myRect.getArea()); document.write("<br> Perimeter: " + myRect.getPerimeter()); </script>
Output:
Area: 20
Perimeter: 18

Here, the Rectangle() function serves as an outer scope that contains the variables required i.e. length, width, as well as the functions create(), getArea(), and getPerimeter(). All these together are the private details of thisRectangle module that cannot be accessed/modified from the outside. On the other hand, the public API as the name suggests is an object that consists of three functional members and is returned when the Rectangle function execution is complete. Using the API methods we can create and get the value of the area and perimeter of the rectangle.
Note: As we mentioned earlier that modules are the closest concepts of Classes in any other OOP language, many developers might feel like using the ‘new’ keyword while creating a new instance of the Rectangle Module. Rectangle() is just a function, not a proper class to be instantiated, so it’s just called normally. Using new would be inappropriate and actually waste resources.
Executing Rectangle() creates an instance of the Rectangle module and a whole new scope is created and allocated to the function, and therefore a new instance of the member of the functions was generated, as we assigned it to a variable, now the variable had the reference to the allowed public API members. Hence, we can see that running the Rectangle() method creates a new instance entirely separate from any other previous one.
All the member functions have a closure over the length and width, which means that these functions can access them even after the Rectangle() function execution is finished.
That sums up how Modules work in JavaScript. We will uncover more interesting topics on JavaScript and make relevant projects to hone our newly learned skills soon.
javascript-basics
JavaScript
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Roadmap to Learn JavaScript For Beginners
Difference Between PUT and PATCH Request
How to get character array from string in JavaScript?
JavaScript | Promises
Node.js | fs.writeFileSync() Method
How to filter object array based on attributes?
Lodash _.debounce() Method