JavaScript Modules: Import and Export Explained
In this article, we shall explore what is imports and exports in JavaScript and how it helps us in writing modular code.
Why modules are needed?
Before modules were introduced, we used to write code in a single file. JavaScript used global scoping so if you had two different scripts in a same file and having same function transform but working differently it could override the one of the function
// script1.js
var transform = (box)=>{
box.style.transform = 'rotate(45deg) scale(1.5)';
return box;
}
// script2.js
var transform = (value){
return value * 10;
}
<body>
<script src="script1.js">
<script src="script2.js">
<script>
const box = document.querySelector(".box");
const returnBox = transform(box);
</script>
</body>
To eliminate such problems JavaScript adopted a modular style, where you can split your bulky code into smaller module where each module have its own functions and variable which can be injected into a file.
Writing this style of code help in
Namespace pollution — They helped in managing the same name across multiple files
Maintainability — They helped in managing a bulky looking code into different modules where each module can take their part in isolation
Dependency Management —They help you to manage which code from the entire module you need to export and import.
Exporting functions and values
To make a function available in another file, we use export keyword.
There are two types of export
- Named export — There can be multiple named export in a file. While importing, you can extract the exact function or value using their name.
It is best where you need to export some specific functions from the entire file like a library.
// StringFunction.js
// way 1 to export named function
export const firstLetter = (word)=>{
return word.charAt(0);
}
// way 2 to export named function
function capitalize(word){
return word.charAt(0).toUpperCase() + word.slice(1)
}
export {
capitalize;
}
- Default export — There can be only one default function or a value that can be exported in the entire file. Default export represents the main thing that a file represents.
It is best for the file that exports one specific thing
// Logger.js
export default function logger(message){
console.log(message)
}
Importing Modules
Importing modules makes available the exported code in a file where we import it.
- Named import — For named exported values we need to import it using their name inside a {}.
import {firstLetter,capitalize} from "./StringFunction.js"
2. Default import — We can import default exported value directly without any {}
import Logger from "./Logger.js"
3. All — We can import everything from a file as an object
import * as StringFunctions from "./SomeFile.js"
Benefits of Modular Code
Using this style of writing a modular code helps us to achieve
Reusability — Export one and you can use it multiple times
Lazy Loading — Using export/import loads a file whenever required and not everything in the start.
Easy to test — It becomes easy to test a individual file rather than to test a specific code from 1000 of lines
Decopuling — It becomes easy to remove the previous version and integrate a newer one without making much changes in the main file.