JavaScript Tutorial
What Are JavaScript Modules?
JavaScript modules allow you to break your code into separate files, each responsible for a specific feature or functionality. Instead of writing all code in one large file, modules help you keep your project organized, reusable, and easier to maintain.
Each module has its own scope and can share functionality using export and import.
Why Use JavaScript Modules?
Modules solve many problems in large applications:
- Avoid global variable conflicts
- Improve code readability
- Enable better code reuse
- Make debugging easier
- Support modern frameworks like React, Vue, and Angular
Most modern JavaScript projects rely heavily on modules.
How JavaScript Modules Work
A JavaScript file becomes a module when you use:
- export to share code
- import to use code from another file
Each module runs in strict mode by default and has its own private scope.
Exporting in JavaScript Modules
You can export variables, functions, or classes.
Named Export Example:
export const siteName = "Learn2Kode";
export function greet() {
return "Welcome to JavaScript Modules";
}
Multiple values can be exported from the same file.
Importing in JavaScript Modules
Use import to access exported values.
Example:
import { siteName, greet } from "./utils.js";
console.log(siteName);
console.log(greet());
The names must match exactly for named imports.
Default Export in JavaScript
A module can have one default export.
export default function add(a, b) {
return a + b;
}
Importing a default export:
import add from "./math.js";
Default exports are flexible and commonly used.
Combining Named and Default Exports
export default class User {
constructor(name) {
this.name = name;
}
}
export const role = "Admin";
import User, { role } from "./user.js";
This pattern is widely used in real-world applications.
Using Modules in HTML
To enable modules in the browser, add type=”module”.
<script type="module" src="app.js"></script>
Without this, import and export will not work in browsers.
Module Scope vs Global Scope
- Variables inside modules are not global
- Prevents accidental overwrites
- Encourages clean architecture
This is a major advantage over traditional scripts.
JavaScript Modules vs Script Files
| Feature | Modules | Regular Scripts |
|---|---|---|
| Scope | Local | Global |
| Import / Export | Yes | No |
| Strict mode | Enabled by default | Optional |
| Best for projects | Large apps | Small scripts |
Common Mistakes with JavaScript Modules
- Forgetting type="module"
- Wrong file paths
- Mixing default and named imports incorrectly
- Running modules from local file system without server
Always test modules using a local server.
When Should You Use JavaScript Modules?
Use modules when:
- Your project has multiple files
- Code reuse is required
- You are building scalable apps
- Working with frameworks or bundlers
Avoid modules only for very small scripts.
Real-World Use of JavaScript Modules
JavaScript modules are used in:
- React and Vue applications
- Node.js projects
- Frontend build tools
- Component-based architectures
They are essential for modern JavaScript development.
Final Thoughts
JavaScript modules make your code clean, scalable, and professional. Learning how to use import and export is a must-have skill for every JavaScript developer in 2025.