An Introduction to Module Systems in JavaScript
The concept of modules comes from the modular programming paradigm. This paradigm proposes that software should be composed of separate, interchangeable components called “modules” by breaking down program functions into stand-alone files that can work separately or coupled in an application.
A module is a stand-alone file that encapsulates code to implement certain functionality and promote reusability and organization.
Here you will cover the module systems used in JavaScript applications, including the module pattern, the CommonJS module system used in most Node.js applications, and the ES6 Module system.
The Module Pattern
Before the introduction of native JavaScript modules, the module design pattern was used as a module system to scope variables and functions to a single file.
This was implemented using immediately invoked function expressions, popularly known as IIFEs. An IIFE is an un-reusable function that runs as soon as it is created.
Here’s the basic structure of an IIFE:
The code block above describes IIFEs used in three different contexts.
IIFEs were used because variables declared inside a function are scoped to the function, making them only accessible inside the function, and because functions allow you to return data (making them publicly accessible).
For example:
The code block above is an example of how modules were created before the introduction of native JavaScript modules.
The code block above contains an IIFE. The IIFE contains a function that it makes accessible by returning it. All the variables declared in the IIFE are protected from the global scope. Thus, the method (sayName) is only accessible through the public function,callSayName.
Notice that the IIFE is saved to a variable,foo. This is because, without a variable pointing to its location in memory, the variables will be inaccessible after the script runs. This pattern is possible due toJavaScript closures.
The CommonJS Module System
The CommonJS module system is a module format defined by the CommonJS group to solve JavaScript scope issues by executing each module in its namespace.
The CommonJS module system works by forcing modules to explicitly export variables they want to expose to other modules.
This module system was created forserver-side JavaScript (Node.js)and, as such, is not supported by default in browsers.
To implement CommonJS modules in your project, you have to first initialize NPM in your application by running:
Variables exported following the CommonJS module system can be imported like so:
Modules are imported in CommonJS using therequirestatement, which reads a JavaScript file, executes the read file, and returns theexportsobject. Theexportsobject contains all the available exports in the module.
You can export a variable following the CommonJS module system using either named exports or default exports.
Named Exports
Named exports are exports identified by the names they were assigned. Named exports allow multiple exports per module, unlike default exports.
In the code block above, you are exporting two named functions (myExportandanotherExport) by attaching them to theexportsobject.
Similarly, you can export the functions like so:
In the code block above, you set theexportsobject to the named functions. You can only assign theexportsobject to a new object through themoduleobject.
Your code would throw an error if you attempted to do it this way:
There are two ways you may import named exports:
Import all the exports as a single object and access them separately usingthe dot notation.
De-structure the exports from theexportsobject.
One thing is common in all the methods of importing, they must be imported using the same names they were exported with.
Default Exports
A default export is an export identified by any name of your choice. it’s possible to only have one default export per module.
In the code block above, you are exporting a class (Foo) by reassigning theexportsobject to it.
Importing default exports is similar to importing named exports, except that you can use any name of your choice to import them.
In the code block above, the default export was namedBar, although you can use any name of your choice.
The ES6 Module System
ECMAScript Harmony module system, popularly known as ES6 modules, is the official JavaScript module system.
ES6 modules are supported by browsers and servers, although you require a bit of configuration before using them.
In browsers, you have to specify thetypeasmodulein the script import tag.
In Node.js, you have to settypetomodulein yourpackage.jsonfile.
You can also export variables using the ES6 module system using either named exports or default exports.
Similar to named imports in CommonJS modules, they are identified by the names they were assigned and allow multiple exports per module.
In the ES6 module system, named exports are exported by prefixing the variable with theexportkeyword.
Named exports can be imported into another module in ES6 in the same ways as CommonJS:
Here’s an example of de-structuring:
Here’s an example of importing the whole object:
In the code block above, the asterisk (*) means “all”. Theaskeyword assigns theexportsobject to the string that follows it, in this case,foo.
Similar to default exports in CommonJS, they are identified by any name of your choice, and you can only have one default export per module.
Default exports are created by adding thedefaultkeyword after theexportkeyword, followed by the name of the export.
Mixed Exports
The ES6 module standard allows you to have both default exports and named exports in one module, unlike CommonJS.
Importance of Modules
Dividing your code into modules not only makes them easier to read but it makes it more reusable and also maintainable. Modules in JavaScript also make your code less error-prone, as all modules are executed in strict mode by default.
Get a quick refresher on JavaScript elements with this cheat sheet.
You can block out the constant surveillance and restore your privacy with a few quick changes.
This small feature makes a massive difference.
Your phone’s camera app doesn’t show this, so it’s easy to miss.
These plugins will make you wonder why you used Photoshop in the first place.
When your rival has to bail out your assistant.
