A JavaScript module is essentially a piece of code written in a file that exposes a public API for other files to call and use. Just like regular Web APIs, modules enable developers to share an executable piece of code that accepts and returns values.
When you open a browser, you can request a website to be displayed by hitting a specific URL like wikipedia.com or google.com.
You don’t know how the server process your request, all you care about is that the browser loads and displays the website.
Modules are similar. You can use use a piece of code that’s written by other people without knowing the implementation detail. All you need to know is what modules are exposed for you to use, and what parameter (if any) you need to send.
The benefits of using modules
A modular approach will give your project the following features:
- Organization: Allows you to organize your code into small file chunks, with each file responsible for one job.
- Abstraction: Hides the implementation detail so you don’t need to understand how the code runs.
- Encapsulation: Just like you can expose a piece of code from a file, you can also hide / protect another piece of code from public access.
- Reusability: By exposing a piece of code that has accepts input and returns output, your code becomes a processing machine that can be reused by other pieces of code again and again.
In short, using modular approach will make your life as a developer easier.
The development of official JavaScript module feature
JavaScript started out as a scripting language to help developers access and manipulate the DOM tree. The inventor famously worked to release JavaScript in only 10 days, so obviously it doesn’t have an official module import and export statements.
That’s reasonable because at the beginning of the Internet era, JavaScript was used to write simple scripts that manipulates the DOM, like changing the color of a button or change a certain text of the web page. Over time however, JavaScript code grows more complex.
Today, JavaScript is used to write the entire front-end side of a web-based applications. To help reduce the complexity of JavaScript code, developers looked into the modular feature of other languages like Ruby, Java and C++.
These attempts to emulate that modular feature into JavaScript gave birth into multiple module specifications, a set of blueprint that could be implemented into JavaScript engine. Some of these blueprints are:
- AMD specification, which is implemented into requireJS for client side.
- CommonJS specification, implemented into Node.js server
- UMD specification, capable of working everywhere, be it in the client, on the server or elsewhere.
While these blueprints have played an important role in the past, the release of ES6 Modules specification finally offers developers the official way of importing and exporting JavaScript code.
Today, ES6 Modules specification is the most popular approach to create JavaScript modules, with CommonJS specification still used extensively in Node.js. In the future, Node.js will support both CommonJS and ES6 Modules specification.
Conclusion
A JavaScript module is simply a JavaScript file with pieces of the whole code exported for use by other pieces of code. By using modules, you’ve implemented a modular approach into your project, enabling you to organize, abstract, encapsulate, and reuse your code as development requires it.