JavaScript modules allow you to break your code into separate files, making it organized, reusable, and maintainable. This guide will walk you through the basics of ES Modules (ECMAScript Modules), the standard module system in JavaScript.
1. What are JavaScript Modules and Why Use Them?
Before modules, all JavaScript ran in a global scope, leading to a problem called “namespace pollution” where different parts of your code could accidentally overwrite variables in another file.
A module is simply a file that exports reusable pieces of code (functions, variables, classes) for other files to import.
Key Benefits:
-
Isolation: Variables and functions inside a module are private by default. Only what you explicitly export is visible outside.
-
Reusability: Write a function once and import it anywhere in your project.
-
Maintainability: Easier to understand, debug, and update small, focused files.
-
Dependency Management: Modules make it clear exactly what code is needed by another file.
2. Setting up ES Modules in HTML
To tell the browser to treat your JavaScript file as a module, you need to add type="module" to your script tag in your HTML file
<!DOCTYPE html>
<html>
<head>
<title>JS Modules Demo</title>
</head>
<body>
<h1>Check the Console!</h1>
<script type="module" src="app.js"></script>
</body>
</html>
3. Named Exports and Imports
This is the most common way to share multiple pieces of code from a single module file.
A. Creating the Module (utils.js)
In your module file, use the export keyword before any variable, function, or class you want to make available.
// utils.js
// Exporting a function
export function add(a, b) {
return a + b;
}
// Exporting a constant
export const API_KEY = '12345-abcde';
// You can also export them all at the end
function subtract(a, b) {
return a - b;
}
export { subtract };
B. Importing and Using the Module (app.js)
In the file that needs the code, use the import keyword with curly braces {} to specify the exact names you want to import.
// app.js
import { add, API_KEY } from './utils.js';
import { subtract } from './utils.js'; // Can be imported separately or with others
const result = add(10, 5);
console.log(`10 + 5 = ${result}`); // Output: 10 + 5 = 15
console.log(`API Key: ${API_KEY}`); // Output: API Key: 12345-abcde
// You must include the file extension (e.g., .js) for browser imports!
Renaming Named Imports:
If you have a name conflict, you can rename an import using the as keyword:
// app.js
import { add as sum, subtract } from './utils.js';
console.log(sum(8, 2)); // 10
4. Default Exports and Imports
A module can only have one default export. This is typically used to export the main entity of the file (like a class or a primary function).
A. Creating the Default Export (User.js)
Use the export default keywords.
// User.js
export default class User {
constructor(name) {
this.name = name;
}
greet() {
console.log(`Hello, my name is ${this.name}`);
}
}
B. Importing the Default Export (app.js)
When importing a default export, you do not use curly braces, and you can give the imported item any name you like.
// app.js
import MyUserClass from './User.js'; // We named the import 'MyUserClass'
const user = new MyUserClass('Alice');
user.greet(); // Output: Hello, my name is Alice
💡 Pro Tip: You can mix default and named exports in the same file!
5. Dynamic Imports (The Next Level)
Standard imports are static, meaning they are loaded before the rest of the code runs.
Dynamic imports use the import() function syntax and allow you to load a module on demand (asynchronously). This is great for performance, as you can load large modules only when the user needs them.
// app.js
const button = document.getElementById('load-chart-btn');
button.addEventListener('click', async () => {
// Dynamically load the 'chart-library.js' module
try {
const chartModule = await import('./chart-library.js');
// Use the exported function
chartModule.renderChart('data-container');
console.log('Chart module loaded and rendered!');
} catch (error) {
console.error('Failed to load chart module:', error);
}
});
Conclusion
ES Modules are the foundation of modern JavaScript. By using export and import correctly, you can create structured, efficient, and highly maintainable applications. Start splitting your larger projects into small, focused module files today!
Useful links below:
Let me & my team build you a money making website/blog for your business https://bit.ly/tnrwebsite_service
Get Bluehost hosting for as little as $1.99/month (save 75%)…https://bit.ly/3C1fZd2
Best email marketing automation solution on the market! http://www.aweber.com/?373860
Build high converting sales funnels with a few simple clicks of your mouse! https://bit.ly/484YV29
Join my Patreon for one-on-one coaching and help with your coding…https://www.patreon.com/c/TyronneRatcliff
Buy me a coffee 
https://buymeacoffee.com/tyronneratcliff
