Picture this: you’re building your dream video game. You’ve got characters, levels, magical items, boss fights, and maybe even a talking pet dragon.

Now… imagine shoving all that code into one gigantic file. Scrolling through it would feel like searching for your phone in a messy teenager’s bedroom — possible, but painful.

That’s why JavaScript Modules exist.

Modules are like separate workshops for your code — each one focused on building a specific part of your project. In one workshop, you might be forging swords (functions). In another, you’re crafting armor (classes). And in another, you’re baking cookies for the developers (purely optional).

What Exactly is a Module?

In JavaScript, when you save code in a file and use the module system, that file becomes its own private space. Think of it as a workshop with its own set of tools (variables and functions) that don’t leak out unless you deliberately hand them over.

This prevents two major headaches:

  1. Name Clashes – No more worrying that your “score” variable in one file overwrites the “score” in another.
  2. Unwanted Access – If you don’t export something, it stays private.

Why Bother with Modules?

  • Organization: Break huge projects into bite-sized, easy-to-manage files.
  • Safety: Prevents accidental overwriting of variables/functions.
  • Reusability: Use the same piece of code in multiple places without copy-pasting.

Sharing Your Workshop’s Tools: export

If you want other files to use something from your module, you have to export it.

1. Named Exports

You attach export in front of what you want to share.

// my-module.js
export const PI = 3.14;
export function doSomething() {
    console.log('Hello from a module!');
}
function secretPlan() {
    console.log('This stays private!');
}
export class MyClass {
    shout() {
        console.log('Class in action!');
    }
}

Here, PI, doSomething, and MyClass are public. secretPlan()? That’s locked away.

2. Default Exports

Every module can have one default export — the “main product” of that file.

// circle.js
export const PI = 3.14;
export default function area(radius) {
    return PI * radius * radius;
}

Borrowing from Other Workshops: import

1. Importing Specific Items

// my-other-file.js
import { doSomething, MyClass, PI } from './my-module.js';

doSomething();
const obj = new MyClass();
console.log(PI);

2. Importing a Default Export

// main.js
import calculateCircleArea from './circle.js';
console.log(calculateCircleArea(5));

3. Importing Everything (Namespace)

// app.js
import * as myModule from './my-module.js';
myModule.doSomething();
console.log(myModule.PI);

4. Importing with a New Name

import { thisIsWayTooLongOfAName as shortName } from './another-module.js';
shortName();

Browser Support Reality Check

While ES6 Modules are the official standard, older browsers might squint and say: “What sorcery is this?” That’s why developers often use transpilers like Babel — which convert shiny modern code into something old browsers understand.

In Short

Modules = Organized code. Exports = Your “public tools.” Imports = Borrowing tools from another workshop. Result = Cleaner, safer, and reusable code.

Review: Fill-in-the-Gap Questions

  1. A module in JavaScript is basically a file that has its own private __________.
  2. Using modules helps prevent __________ clashes between variables or functions.
  3. To make something available to other modules, you must __________ it.
  4. In a module, anything not exported remains __________.
  5. Each module can have only one __________ export.
  6. To bring in named exports from another module, you use the __________ keyword with curly braces {}.
  7. When importing a default export, curly braces are __________.
  8. To import everything from a module into a single object, you use the import * as name __________.
  9. Renaming an imported item is done using the __________ keyword.
  10. Developers use tools like __________ to make modern module code work in older browsers.
<
Previous Post
The Tech Trainer’s Dilemma: Am I Falling Behind?
>
Next Post
JavaScript Screen Object: Your Window to the User’s Display