Modules in JavaScript

Module is self-contained and reusable chunk of JavaScript code written in a modular way. Until ES6 JavaScript did not define any language construct for working with modules. So writing modular JavaScript involves the use of some coding convention.
The purpose of using modules is to facilitate the creation of programs using code from different sources. There are several benefits of using modules. The code uses namespaces, it is easier to maintain and it is easier to reuse.
Modules must avoid to change the global environment, the best if they define only one global unit.

Module pattern

The module pattern is a design pattern that implements concept of creating program functionality as independent, interchangeable modules. This is analogous to classes that were not supported in JavaScript before ES6. Modules enable defining public and private methods and variables within a single object. That allows you to create a public API for the methods and to encapsulate private methods and variables.
There are several ways to implement module pattern.

Anonymous closure

The basic way is to create an anonymous function and immediately execute it. The code executed in the function is in a closure, that ensure privacy and state during lifetime.

(function () {
    // here you define variables and functions that are in local, private scope
    // there is still access to global scope
}());

The pair of round brackets () around the anonymous function is required. Statement that begins with the function keyword is treated as function declaration. Using the pair () you crates a function expression.

Note that you can use substitute syntax, you surround the function declaration with brackets and call it immediately:

(function () {
    // code here
})();

Global import

Inside the modules, of course, you have direct access to global variables. However, by using and creating global variables inside closures you make the code difficult to manage. The solution in this case is to use global variables as parameters of the anonymous function and thus explicitly import them into the module

(function ($) {
    // in the module you have access to passed global variable jQuery as the $ variable
}(jQuery));

Anonymous Object Interface

In this approach you decide which variables and methods you keep private and which you expose by putting them in the return statement. You create an object literal, which is returned and stored in a global variable.

var moduleName = (function() {
    // here you define variables and methods
    var privateMethod = function() {
        // code here
    };

    return {
        // here you put public methods
        publicMethod: function() {
            // code here
        }
    };
}());

Locally scoped object

In previous example an object inside the module has no name. In this case inside the module you declare a variable and assign to it an object literal.

var moduleName = (function() {
    // locally scoped object
    var obj = {};

    // here you define variables and methods
    var privateMethod = function() {
        // code here
    };

    // here you define public interface:
    obj.publicMethod: function() {
        // code here
    }
    
    return obj;
}());

Revealing module pattern

In this case all variables and method are kept private until some of them are explicitly exposed:

var moduleName = (function() {

    var privateMethod = function() {
        // code here
    };
    
    var myMethod = function() {
        // code here
    };
    
    var anotherMethod = function() {
        // code here
    };

    return {
        myMethod: myMethod,
        anotherMethod: anotherMethod
    };
}());