ES6 Modules: Import and Export

1. Why Modules? And How to Make Them Work

At its core, a module is just a JavaScript file. However, what makes it a module is its ability to selectively make its code (functions, classes, variables) available to other files (exporting) and to consume code from other files (importing). This creates a clear boundary, preventing global scope pollution and making your code reusable and easier to maintain.

However, there's a critical setup step. Due to browser security policies (specifically CORS), you can't just open an HTML file that uses modules directly from your local file system. You must serve it through a local web server.

The video below explains this common pitfall and demonstrates the two essential requirements for using ES6 modules in the browser:

1. Running a local server.
2. Adding type="module" to your <script> tag.

2. Exporting from a Module

There are two primary ways to export code from a module: named exports and a default export. A single module can have many named exports but only one default export.

• Named Exports: Use these when a module offers several distinct pieces of functionality. You can export them as you declare them (inline) or all at once at the end of the file.
• Default Export: Use this for the main, single piece of functionality a module provides. A common convention is to use export default for the primary class or function in a file.

The next video concisely demonstrates the syntax for both types of exports.

Let's look at a quick example. Imagine we have a file named stringUtils.js:

// stringUtils.js

// Named exports
export const toUpperCase = (str) => str.toUpperCase();
export const toLowerCase = (str) => str.toLowerCase();

// Default export
const createGreeting = (name) => `Hello, ${name}!`;
export default createGreeting;

3. Importing into a Module

Once you have exported code, you need to import it where it's needed. The import syntax directly corresponds to how the code was exported.

• Importing Named Exports: You must use curly braces {} and the exact variable/function names.
• Importing a Default Export: You can choose any name you like for the import, and you don't use curly braces.

You can also combine these into a single line, rename imports to avoid conflicts using the as keyword, or import everything from a module into a single namespace object.

This next segment covers all these importing patterns.

Here is how we would import the code from our stringUtils.js example into a main.js file:

// main.js
// Note: your index.html would have <script type="module" src="./main.js"></script>

// Import the default export and give it a name
import makeGreeting from './stringUtils.js';

// Import named exports using their exact names
import { toUpperCase, toLowerCase } from './stringUtils.js';

const greeting = makeGreeting('Alex'); // "Hello, Alex!"
const loudGreeting = toUpperCase(greeting); // "HELLO, ALEX!"

console.log(loudGreeting);

// What if we wanted to rename 'toLowerCase' to avoid a name collision?
import { toLowerCase as toLower } from './stringUtils.js';
console.log(toLower('TEST')); // "test"

4. Syntax Cheatsheet

There are many ways to combine import and export syntax. This can feel overwhelming at first. This cheatsheet is an excellent visual reference that summarizes the most common patterns.

For a more comprehensive text-based summary, you can review the "Summary" section of the "Export and Import" article from javascript.info. It's a great way to solidify your understanding of all the possible syntaxes.

Conclusion

You've now learned the modern, standard way to structure and organize JavaScript code. This is a massive step towards writing clean, scalable, and maintainable applications.

Key Takeaways:

• Modules Encapsulate Code: They allow you to export specific pieces of code and import them only where needed, preventing global scope pollution.
• Browser Setup is Key: Using modules in a browser requires serving your files from a web server and adding type="module" to your <script> tag.
• Named vs. Default Exports: A module can have many named exports (for libraries of helpers) but only one default export (for the module's primary purpose).
• Import Syntax Matches Export Syntax: Use {} for named imports and a plain name for default imports. The as keyword lets you rename imports to avoid conflicts.

With code organization covered, we'll shift our focus in the next lesson to another handy ES6 feature: using default parameter values to make your functions more robust and readable.