Intro to ES6 Modules

Modules are a fundamental building block of modern JavaScript applications. ES6 modules allow you to break your code into smaller, reusable pieces that can be easily maintained, tested, and debugged.

Why Use ES6 Modules?

Imagine working on a large-scale project where all code is written in a single file—this would be a nightmare to manage! ES6 modules provide a way to **split code into multiple files** while keeping it organized and maintainable. With modules, you can:

Reuse code across different parts of your project
Improve maintainability by organizing logic into separate files
Enhance performance by only loading the necessary parts of the code

Exporting and Importing in ES6

Exporting a Single Item with `export default`

The export default statement allows you to export a **single** item from a file.


// wallet.js
export default class Wallet {
  constructor(balance) {
    this.balance = balance;
  }

  deposit(amount) {
    this.balance += amount;
  }
}

Importing a Default Export

When importing a default export, you can name it anything:


// main.js
import Money from './wallet.js';

const myWallet = new Money(100);
myWallet.deposit(50);
console.log(myWallet.balance); // 150

Exporting Multiple Items

Instead of using export default, you can export multiple items:


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

export const PI = 3.14159;

Importing Named Exports

When importing named exports, you must use **curly braces**:


// main.js
import { greet, PI } from './utilities.js';

console.log(greet("Alice")); // Hello, Alice!
console.log(PI); // 3.14159

Aliasing Imports

You can rename imports using the as keyword:


import { greet as sayHello } from './utilities.js';

console.log(sayHello("Bob")); // Hello, Bob!

Using ES6 Modules in the Browser

To use ES6 modules in an HTML file, specify type="module" in the <script> tag:


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

Mini-Project: Creating a Simple Game

Follow these steps to create a simple button-based game using ES6 modules.

Step 1: Create an `index.html` File


<html>
  <head>
    <meta charset="UTF-8">
    <title>Simple Game</title>
  </head>
  <body>
    <button id="button">Start Game</button>
    <div id="message"></div>
    <script type="module" src="./program.js"></script>
  </body>
</html>

Step 2: Create a `game.js` Module


// game.js
export class Game {
  constructor() {
    this.message = "Do you want to play a game?";
  }

  start() {
    document.getElementById('button').addEventListener('click', () => {
      document.getElementById('message').innerText = this.message;
    });
  }
}

Step 3: Create a `program.js` File


// program.js
import { Game } from './game.js';

window.addEventListener('DOMContentLoaded', () => {
  const game = new Game();
  game.start();
});

Step 4: Run an HTTP Server

Run a simple HTTP server to serve your files:


python3 -m http.server

Open your browser and navigate to http://localhost:8000 to see your game in action!

Key Takeaways

ES6 uses import and export instead of CommonJS's require and module.exports.
Imports in ES6 must be at the **top** of the file.
Use export default for a **single** export per file.
Use named exports (export { item }) when exporting **multiple** items.
Alias imports with as to avoid naming conflicts.
Use type="module" when including ES6 modules in an HTML file.

Final Thoughts

Mastering ES6 modules will significantly improve how you structure your JavaScript projects. Whether you're working in the **browser** or **Node.js**, modularizing your code makes it more readable, scalable, and maintainable.