JavaScript | Modules

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


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 publicAPI 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 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 publicAPI 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.



My Personal Notes arrow_drop_up

FullStack Developer of six websites Verified Freelancer with 19 complete projects and 4.9 rating Modest Lifelong Learner

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

3


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.