ES6 Modules

What are ES6 Modules?

ES6 Modules provide a way to split code into separate files and share functionality between them. Each module has its own scope, which helps prevent naming conflicts and makes code more maintainable.

Exporting from a Module

Named Exports

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

Default Export

// person.js
export default class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    return `Hello, ${this.name}`;
  }
}

Importing into a Module

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

// Import with alias
import { add as sum } from './math.js';

// Import all as a namespace
import * as math from './math.js';

// Default import
import Person from './person.js';

// Mix default and named
import Person, { add } from './person.js';

Module Script Tag

To use modules in HTML, use the type="module" attribute.

<script type="module">
  import { add } from './math.js';
  console.log(add(2, 3));
</script>

Common Mistakes

• Forgetting type="module" in script tags
• Using relative paths incorrectly (./ and ../)
• Mixing default and named exports incorrectly
• Using import in non-module scripts

Quick Quiz

Summary

• ES6 modules organize code into separate files
• Use export to make code available
• Use import to bring code into another module
• Named exports: export const name = value
• Default export: export default
• Add type="module" to script tags