JavaScript Modules: Import and Export Explained
Everybody who has written a decent amount of JavaScript has used import and export keywords all the time.
But many don't understand its significance, they just use it because
it should be done that way
At some point, it becomes muscle memory.
Create a file → export something
Need it somewhere else? → import it
No questions asked.
No real thought about why this exists in the first place.
The Kitchen Analogy
Imagine you’re running a small kitchen. Not a big restaurant. It's just you.
At first, everything is in one place:
vegetables
spices
utensils
cooking
You don’t need structure. You just reach out and grab things.
But then.... things grow.
Now there’s:
a separate storage room
a prep area
a cooking area
And suddenly, you can’t just grab everything anymore.
You need a system.
Export: Sending Things Out
The storage room doesn’t give you access to everything inside it.
It only sends out what’s needed.
Think of it like:
“Only these ingredients are allowed to leave this room.”
That’s export.
// storage.js
export const rice = "Rice";
export const spices = "Spices";
You’re explicitly saying:
These are available outside. Everything else stays inside.
Import: Bringing Things In
Now the cooking area doesn’t have direct access to storage.
It has to request what it needs.
// kitchen.js
import { rice, spices } from './storage.js';
You don’t bring the entire storage room.
Just what you asked for.
But Why Do This at All?
Imagine if everything was just open. Anyone could take anything from anywhere.
You’d get:
duplicate ingredients
missing items
confusion about where things came from
Basically…
the same chaos as a 1000-line JavaScript file.
With modules, something small but important happens:
You stop saying:
“Everything is available everywhere.”
And start saying:
“Only this is allowed here.”
Default vs Named
Sometimes a room is known for one main thing.
Like:
“This room is the oven.”
That’s a default export.
// oven.js
export default function cook(food) {
return `Cooking ${food}`;
}
You don’t care what it’s called internally.
You just bring it in:
import cook from './oven.js';
Other times, a room has multiple things.
Like a spice rack.
// spices.js
export const salt = "Salt";
export const pepper = "Pepper";
Now you have to be specific:
import { salt, pepper } from './spices.js';
What Actually Changes:
Before this system , everything was everywhere. But now
things are placed
access is controlled
flow is intentional
The Real Point
import and export are not just syntax.
They are boundaries.
They force you to answer:
“What should this file expose?”
and
“What does this file actually need?”
And that’s where things start getting cleaner.
Not because of JavaScript.
But because of how you start thinking.
