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 have been executed once.
JavaScript Modules: These are the best implementation of Closure. Modules are small units of independent, reusable code that are 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 the 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.
Example:
javascript
<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); console.log("Area: " + myRect.getArea()); console.log("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 this Rectangle 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.
