ES6 Modules

In modern JavaScript development, modularity is key. It helps us write clean, reusable, and maintainable code. That’s where ES6 Modules come in. Introduced in ECMAScript 2015 (ES6), modules allow developers to split JavaScript code into smaller pieces and import/export them between files. Let’s dive in!

Why Do We Need Modules?

Imagine building a large website like Amazon. All the code can’t live in a single file — it would be a mess! Instead, we split the code into different files:

• math.js for calculations
• cart.js for shopping cart logic
• user.js for login/signup logic

This approach is known as modular programming, and ES6 Modules give JavaScript a native way to do it.

Export: Sharing Code from a File

To make code reusable in other files, we export it.

Example 1: Named Export

// file: math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

You can export multiple items from a file using named exports.

Example 2: Default Export

// file: greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

Each file can have only one default export.

Import: Bringing Code into Another File

Now, let’s use what we exported.

Named Import

// file: app.js
import { add, subtract } from './math.js';

console.log(add(2, 3)); // 5

You can import multiple named exports using curly braces { }.

Default Import

// file: app.js
import greet from './greet.js';

console.log(greet('Kirti')); // Hello, Kirti!

Default exports don’t need curly braces during import.

Mixing Default and Named Exports

Yes, you can use both in one file:

// file: tools.js
export const multiply = (a, b) => a * b;
export default function divide(a, b) {
  return a / b;
}

And import like this:

import divide, { multiply } from './tools.js';

File Structure & Usage

Let’s say we have this folder:

project/
├── index.html
├── app.js
├── math.js

index.html should include type="module":

<script type="module" src="app.js"></script>

Without type="module", ES6 imports won’t work in the browser.

Important Rules of ES6 Modules

• Modules run in strict mode by default.
• Module imports are hoisted (moved to the top automatically).
• Files must be served over HTTP/HTTPS, not directly from the file system (file:// won’t work).
• File paths must include extensions like .js.

ES6 Modules vs CommonJS

Real-Life Use Case

Let’s say you’re building a flower shop website. You can use ES6 Modules like this:

// file: priceCalculator.js
export function getTotalPrice(quantity, price) {
  return quantity * price;
}

// file: checkout.js
import { getTotalPrice } from './priceCalculator.js';

console.log(getTotalPrice(5, 100)); // 500

Clean, modular, and easy to understand!

Benefits of Using ES6 Modules

• Code reusability
• Easy to test and debug
• Better file organization
• Avoids polluting global scope
• Works in modern browsers and tools

Final Words

ES6 Modules are now the standard for writing modular JavaScript code. Whether you’re creating a small project or a large-scale web application, using modules helps keep your code organized and professional.