In this article we'll understand the JavaScript modules with simple explanations. Imagine having your JavaScript projects growing, keeping all code in one file becomes messy. That’s why modules exist. Let’s go step-by-step in a clear beginner-friendly way.
Why Modules Are Needed
Imagine writing everything in one file. Small code files seems handleable but what if it becomes 5000+ or 10000+ . That is where the nightmare of developer's begin. Your code becomes hard to find, maintain, naming conflicts arises and reusing code becomes hard to impossible.
That is where Module comes to rescue you from the mess we just discussed.
What is module?
Think of module as splitting code into separate files, where each file handles one responsibility.
We can see here:
project --
-- math.js
-- greeting.js
-- app.js
Each becomes a module as each file has single responsibility. This makes code clean, organized and reusable. Saving us from a lot of headache.
Exporting functions or values
Remember that a module only exposes things you export. Anything not exported stays private to the file.
for example:
export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
Here we are exporting add and multiply function so we can use them in other files.
We can export not only functions but other things as well, let's see them.
Exporting Variables:
export const PI = 3.14;
Exporting Objects:
export const user = {
name: "Sam",
age: 25
};
What we can understand from this is that whatever you export becomes available for other files as well.
Importing Modules
Above we learnt that to make one file available we have to export it but that was only 50% of the module story, there is something call importing the modules which complete the entire story. We import the needed files to use them after making them available by exporting them. And this completes the 100% of module story.
for example:
import { add } from "./index.js";
console.log(add(2, 3));
Import Multiple Things
import { add, multiply } from "./math.js";
Import Everything
import * as math from "./math.js";
console.log(math.add(2,3));
console.log(math.multiply(2,3));
When we write this, we are importing everything that is exported from math.js and grouping it into a single object called math and internally it behaves like this:
math = {
add: function,
multiply: function,
}
Default vs Named Exports
This is one of the most confusing topics , so let’s break it clearly.
Named Export
You export multiple things by name.
math.js
export function add(a, b) {
return a + b;
}
export function subtract(a, b) {
return a - b;
}
Import
import { add, subtract } from "./math.js";
Notice the curly braces {}
Because we are importing by name.
Default Export
A module can have only one default export.
greeting.js
export default function greet(name) {
return "Hello " + name;
}
Import
import greet from "./greeting.js";
No {} needed.
For default export we can do something like this:
Example
export default function greet() {}
You can import it like:
import hello from "./greet.js"
or
import anything from "./greet.js"
In conclusion the name does not matter. (Yup! it does not matter, I find it quite interesting)
Benefits of modular code
Modules provide several advantages when building JavaScript applications.
Better organization
Breaking code into modules makes large projects easier to navigate and understand.
Code reusability
Functions and utilities written in one module can be reused across different parts of the project.
Easier maintenance
If something breaks, developers can quickly locate the module responsible for the issue and fix it.
Team collaboration
Different developers can work on different modules at the same time without interfering with each other’s work.
Encapsulation
Modules allow developers to hide internal implementation details and only expose the necessary parts of the code.
Summary
As JavaScript applications grow in size, modules become an essential tool for keeping projects organized, scalable, and maintainable. It save us a lot of time and headache!
