Lesson 11: ES6 Modules

Welcome to Lesson 11! ES6 Modules are a major advancement in JavaScript that allow you to split your code into multiple files and import/export functionality between them. This promotes modularity, maintainability, and clean project structure. Before ES6 Modules, developers often relied on patterns like IIFEs or libraries such as RequireJS for modularity.

With ES6, you can now explicitly export variables, functions, and classes from one file and import them into another. This allows you to separate logic into meaningful files, such as one for utility functions, one for API requests, and another for DOM manipulation.

Here’s a simple example. Suppose you have a file called mathUtils.js:

// mathUtils.js
export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

You can then import these functions in another file, main.js:

// main.js
import { add, multiply } from './mathUtils.js';

console.log(add(5, 3));      // 8
console.log(multiply(4, 7)); // 28

Notice the use of curly braces in the import statement. These are named exports, which means you have to import them using the exact names defined in the source file. Alternatively, you can have a default export:

// greetings.js
export default function greet(name) {
  console.log("Hello, " + name + "!");
}

// main.js
import greet from './greetings.js';
greet("Alice");

Using modules also allows you to keep your global namespace clean, avoiding collisions between variables and functions. Since each module has its own scope, variables declared inside a module are not automatically added to the global window object.

Modules can also import other modules, enabling hierarchical project structures. For example:

// api.js
export async function fetchUsers() {
  const response = await fetch("/users");
  return response.json();
}

// main.js
import { fetchUsers } from './api.js';
fetchUsers().then(users => console.log(users));

To use modules in the browser, make sure your script tag includes type="module":

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

This ensures the browser treats the file as a module, enabling the import/export syntax. Additionally, modules are deferred by default, so you don’t need to add the defer attribute.

Modules are widely used in modern frameworks like React, Vue, and Node.js projects, making them a crucial skill for any developer who wants to maintain scalable and organized codebases.

Practice exercises include creating utility modules for math operations, creating API helper modules, and building a small project split across multiple files to experience modularity firsthand.

By the end of this lesson, you should be able to:

• Understand the purpose of ES6 modules
• Create named and default exports
• Import modules in other files
• Maintain modular and organized code
• Use modules to structure larger projects

Next, we will explore Local Storage & Cookies, which allow you to persist user data in the browser for personalization and state management.