JavaScript ES6 Modules Explained: A Beginner’s Guide to Import and Export

Learn how to use JavaScript ES6 modules with this beginner’s guide. Understand import and export, default vs named exports, and see real examples to write clean, modern code.

Introduction

As JavaScript projects grow, keeping everything in a single file can quickly become confusing and difficult to manage. To solve this, ES6 modules were introduced. Modules enable developers to split code into smaller, reusable chunks that are easier to manage and expand.

What You’ll Learn

• What ES6 modules are and why they matter
• How to use export and import
• The difference between default and named exports
• A simple real-world example of modules in action
• Common beginner questions about modules

What Are ES6 Modules?

Modules are like separate boxes of code that you can use when needed. Instead of writing everything in one big file, you can organize your code into smaller files. Each module handles a specific task, making your code cleaner and easier to understand.

Exporting in JavaScript

To share code with other files, you must export it first.

1. Named Exports: Multiple exports can exist in one file.

Example:

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

1. Default Export: Only one main value or function is exported.

Example:

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

Importing in JavaScript

After exporting, you can bring code into another file using import.

• Importing named exports:

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

• Importing a default export:

import greet from './greet.js';

Real-Life Example: A Small App

Here’s how different modules can work together.

math.js

export const multiply = (a, b) => a * b;
export const divide = (a, b) => a / b;

greet.js

export default function greet(name) {
  return `Welcome, ${name}!`;
}

app.js

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

console.log(greet("Wisdom"));
console.log("5 x 4 =", multiply(5, 4));
console.log("20 ÷ 5 =", divide(20, 5));

This shows how splitting your project into modules keeps things neat and easy to manage.

Why Use Modules?

Modules are important because they make your code:

• Organized: Each part of the code is neatly arranged.
• Reusable: You can use the same module in different projects.
• Maintainable: Fixing or updating one module improves the whole project.

FAQs about JavaScript ES6 Modules

1. What is the difference between import and require in JavaScript?

import is the modern ES6 way of loading modules and is built into JavaScript. require is older and mostly used in Node.js before ES6 modules were supported.

2. Is using default export together with named exports in one file allowed?

Yes, a file can have one default export and multiple named exports.

3. Why do I get an error saying “unexpected token export” in my browser?

Your browser might not support modules directly, or you forgot to use type="module" in your script tag. Example:

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

4. Do ES6 modules work in all browsers?

Modern browsers support modules, but older ones may need tools like Babel or Webpack to make them compatible.

Conclusion

JavaScript ES6 modules give you the power to write structured, modern code. By using export and import, you can break projects into smaller, reusable parts. This makes your code easier to read, test, and maintain.

Start by practicing with simple examples, exporting one function and importing it into another file. Over time, you’ll see how modules make your coding workflow more professional and aligned with today’s JavaScript standards.

You can reach out to me via LinkedIn