Updated March 28, 2023
Introduction to JavaScript Modules
A module is a script file that implements functionality that gets loaded into the main script using export and import directives. Module encapsulates the functionality and exposes it to other JavaScript files as libraries. The export keyword is used to label functions, variables, constants, etc. that need to be accessible outside that module and the import keyword allows functionality to be imported into other modules for use.
Therefore, it will be right to say that each module consists of three sections:
- Dependencies also known as Imports.
- Code
- Exports
When we implement a module, they have strict mode enabled by default and their execution is deferred i.e. the script file(module) is executed only after the HTML document is parsed. When writing a script element, we can tell the browser to treat the script element as a module by assigning the value “module” to the type attribute.
Code:
<script type="module" src="module.mjs"></script>It is important to note that modules are evaluated once, even if they are imported into multiple other modules. While scripts are evaluated at any time as we add them to DOM (Document Object Model). The browser understands it is a module because of the type attribute on the script element. In the above example, the file extension is .mjs, to ensure that whoever views the file understands it is a module and not a script because modules are differently treated as opposed to “classic” script.
Examples to Implement JavaScript Modules
Below are the examples are mentioned:
Example #1: Basic
Code: # index.html
<!Doctype html>
<script type="module">
import {greetings} from './say.js';
document.body.innerHTML = greetings('Adam');
</script>Code: # say.js
export function greetings(user) {
return `Hola, ${user}!`;
}Output :
Example #2: A module is evaluated once.
Code: # index.html
<!doctype html>
<script type="module">
import './say.js'; // Module is evaluated!
import './say.js'; // prints nothing
</script>
document.body.innerHTML = greetings('Adam');
</script>Code: # say.js
console.log("Module is evaluated!");Output:
A module can import multiple elements, all we need to do this prefix those elements with the export keyword. We will import the entire module instead of a function or variable from that module using the -+“*” symbol. Also, I will be using namespace imports(demo). The namespace import – demo is an object whose properties and behaviors are defined by the named exports. See Example 3.
Example #3
Code: # index.html
<!doctype html>
<script type="module">
import * as demo from './say.js';
console.log("Area of Rectangle:" ,demo.rectArea(7,8));
console.log("Square Root of 25 :" ,demo.sqroot(25));
</script>
</html>Code: # say.js
export const sqrt = Math.sqrt;
export function rectArea(l,b) {
return l * b;
}
export function sqroot(sqr) {
return sqrt(sqr);
}Output:
Modules are Fetched Using CORS (Cross-Origin Resource Sharing – A way for users and servers to communicate if they are not on the same domain). The module scripts that are used must have a CORS header implemented that allows cross-site loading like Access-Control-Allow-Origin: *, otherwise, error is thrown and also make sure that the browser allows CORS policy to run. A sample example is shown below:
The different ways of running JavaScript source code are listed below, which helps us in understanding how JavaScript modules are loaded on browsers and servers and how they have evolved over the years.
| Runs on | Loaded | Filename ext. | |
| Script | browsers | async | .js |
| CommonJS module | servers | sync | .js .cjs |
| AMD module | browsers | async | .js |
| ECMAScript module | browsers and servers | async | .js .mjs |
We can see that in our examples we have used .mjs extension for indicating that those script files are modules, though not compulsory but help in indicating that these files are modules of the application.
Conclusion
In this article, we understood what modules in JavaScript are and how it is implemented and the benefits it brings to the table and how it is different from our normal scripts. Modules break the code into pieces with clear interfaces and dependencies. The interface is the visible part that other modules can have a look at, and the dependencies are the part that other modules use.
The important points to remember about modules are:
- Modules by default have use strict
- Modules are executed once.
- The web browsers load and execute the script modules automatically.
- Modules interchange functionalities through import/export.
- Modules have their own, local top-level scope.
- Module execution is deferred.
Recommended Articles
This is a guide to JavaScript Modules. Here we discuss an introduction, three-module consists, examples to implement with codes and outputs. You can also go through our other related articles to learn more –
