Modules in JavaScript have been around for quite a while but were originally implemented in libraries. An example would be how we can import a React component and make use of it in different components without the need to rewrite the function or class from scratch. Modules help us to avoid reinventing the wheel by writing the same logic twice. It also aids in the separation of concerns; you can have a separate module just for adding numbers or another for fetching data from an API. This way, you know exactly where everything belongs. Imagine if all of Google’s code was in one single file and every time the team had to fix something in the search bar, they had to scroll through a billion lines of code just to get to that particular section, wouldn’t that be hectic? Modules help us separate each functionality and thereby tackle each problem or scale-up certain functionalities individually.
Now here’s the good news (kinda old news), modules were introduced in vanilla JavaScript with the release of ECMAScript 2015, popularly known as ES6. The release came with a lot of features that took vanilla JS to a whole new level. These features included arrow functions, rest and spread, destructuring, classes, let and const, modules, etc. This article will focus only on modules and their application in vanilla JavaScript.
Application of ES6 Modules
To begin with, we’ll create our folder which will have our main script and modules. One module will be used for addition while the other will be used for subtraction.
This is what the folder structure looks like:
index.html
script.js
myModules/
add.js
sub.jsSome resources may use the .mjs extension to note module files but we’ll use a different approach by including type=”module” in our script tag. This is shown below:
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ES6 Modules</title>
</head>
<body>
<script type="module" src="script.js"></script>
</body>
</html>
Now let’s create our functions — one for addition and the other for subtraction.
//add.js
function add(a, b){
return a + b;
}
//sub.js
function sub(a, b){
return a - b;
}
Export and Import
All we have done is create regular scripts with functions. How then can we use these functions in other scripts? This is done using the export and import keywords.
In other to access the functionality of a module, it has to be exported from where it was created and then imported into any file where it will be used.
Let us export our add.js:
//add.js
export function add(a, b){
return a + b;
}
Now by adding the export before our function, it makes the script available for imports into other scripts where its function can be used.
The same process is done for sub.js:
//sub.js
export function sub(a, b){
return a - b;
}
Now that we have exported our scripts, let us then import them into our main script and make use of them.
//script.js
import { add } from "./myModules/add.js";
import { sub } from "./myModules/sub.js"
console.log(add(6, 4)); // 10
console.log(sub(6, 4)); // 2
The syntax is pretty easy to understand. Start with the import keyword followed by the name of the function being imported which is nested inside curly brackets and then finally, the path from which the script was imported.
Notice how we used the add and sub-function without creating a function with new parameters from scratch? This is the power of ES6 modules, our script is now reusable from anywhere as long as it has been exported on creation and imported before use. These scripts can now be imported into any other script we wish to use them in. This also eliminates the use of multiple script tags in our HTML file by creating one script that acts as the entry point for all other scripts.
You can equally change the name of the function when importing to something different. For instance, you want to import the sub-function but you would rather call it ‘minus’. This can be done by adding “as” after the original name of the function while importing. Example below:
//script.js
import { sub as minus } from "./myModules/sub.js"
console.log(minus(6, 4)); // 2
Thank you for reading; I hope this article was worth your time. Follow me on Twitter @ihechikara2 My inbox is always open. See ya!
Oldest comments (0)