ES6 Modules in JavaScript Explained with Examples

As JavaScript applications grow, managing code in a single file becomes difficult.

To solve this problem, ES6 (ECMAScript 2015) introduced modules, a standardized way to split JavaScript code into reusable files.

In this tutorial, you’ll learn:

• what ES6 modules are

• why modules are important

• export and import syntax

• default vs named exports

• common mistakes

• best practices

Let’s begin.

---

What Are ES6 Modules?

An ES6 module is a JavaScript file that can:

• export variables, functions, or classes

• import code from other files

• keep variables scoped to the module

Each module has its own scope, unlike traditional scripts where everything is global.

---

Why Use Modules?

Without modules:

• code becomes hard to maintain

• variable name conflicts occur

• reuse is difficult

With modules:

• code is organized

• reusable and maintainable

• easier to debug and scale

---

How to Use ES6 Modules in the Browser

To enable modules in HTML, use:

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

This tells the browser to treat the file as a module.

---

Exporting from a Module

---

Named Exports

You can export multiple values from a file.

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

Each export has a name.

---

Importing Named Exports

// main.js
import { add, subtract } from "./math.js";

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

✔ Names must match exactly
✔ Use curly braces

---

Default Exports

A module can have one default export.

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

---

Importing Default Exports

import greet from "./greet.js";

console.log(greet("Alex"));

✔ No curly braces
✔ Name can be anything

---

Mixing Named and Default Exports

// utils.js
export const PI = 3.14;

export default function square(x) {
  return x * x;
}

Importing:

import square, { PI } from "./utils.js";

---

Renaming Imports and Exports

---

Renaming While Importing

import { add as sum } from "./math.js";

---

Renaming While Exporting

const multiply = (a, b) => a * b;
export { multiply as product };

---

Importing Everything from a Module

import * as math from "./math.js";

console.log(math.add(2, 3));

This groups all exports under one object.

---

Module Scope Behavior

Variables inside a module are not global.

// file.js
const secret = "hidden";

This variable cannot be accessed outside the module unless exported.

---

Modules Are Deferred by Default

ES6 modules:

• load asynchronously

• behave like defer

• execute after HTML parsing

You don’t need defer explicitly.

---

Common Mistakes

---

❌ Forgetting file extension

import { add } from "./math"; // wrong

Correct:

import { add } from "./math.js";

---

❌ Using modules without type="module"

<script src="main.js"></script> <!-- wrong -->

---

❌ Trying to use require()

require() is for CommonJS, not ES6 modules.

---

ES6 Modules vs CommonJS

---

When Should You Use ES6 Modules?

✔ Frontend applications
✔ Modern JavaScript projects
✔ Libraries and reusable code
✔ Frameworks like React, Vue, Angular

---

Best Practices

• One responsibility per module

• Use named exports for utilities

• Use default exports for main functionality

• Keep modules small and focused

• Avoid circular dependencies

---

Mental Model

A module is a self-contained JavaScript file that explicitly shares what it wants and hides the rest.

---

Conclusion

ES6 modules are a foundation of modern JavaScript development.

Once you understand them, your code becomes:

• cleaner

• scalable

• professional

Mastering modules is essential before moving to frameworks like React or backend tools like Node.js