JavaScript Modules

ES Modules

Enabling Modules

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

Key Features

• Strict mode by default
• Own scope (no global pollution)
• Asynchronous loading
• Tree-shaking support

Module Scope

// module.js
const private = 'not accessible globally';
export const public = 'accessible';

// app.js
import { public } from './module.js';
console.log(public); // "accessible"
// console.log(private); // Error!

Module vs Script

Feature	Script	Module
Scope	Global	Module
Strict	Optional	Always
Import	N/A	Yes
Async	No	Yes
defer	Attribute	Default

Import/Export

Named Exports

// utils.js
export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export class User {
  constructor(name) {
    this.name = name;
  }
}

// app.js
import { PI, add, User } from './utils.js';
console.log(PI, add(1, 2));

Default Exports

// user.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

// app.js
import User from './user.js';

Renaming Imports

import { add as sum, PI as pi } from './utils.js';

Importing All

import * as Utils from './utils.js';
console.log(Utils.PI, Utils.add(1, 2));

Side-Effect Imports

import './styles.css';

Dynamic Imports

const module = await import('./module.js');

// In function
async function loadModule() {
  const { default: Module } = await import('./module.js');
  return new Module();
}

Module Patterns

Re-Exporting

// index.js - barrel file
export { add, subtract } from './math.js';
export { User } from './user.js';
export { PI } from './constants.js';

// Usage
import { add, User, PI } from './index.js';

Module Organization

src/
  modules/
    auth/
      index.js
      login.js
      logout.js
    user/
      index.js
      User.js
  utils/
    index.js
    helpers.js
  app.js

Namespace Pattern

// constants.js
export const COLORS = {
  primary: '#3b82f6',
  secondary: '#10b981'
};

export const SIZES = {
  small: 12,
  medium: 16,
  large: 24
};

// Usage
import { COLORS, SIZES } from './constants.js';

Configuration Module

// config.js
const config = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3
};

export default config;

Circular Dependencies

// Avoid if possible
// a.js
import { b } from './b.js';
export const a = 'a';

// b.js
import { a } from './a.js'; // May fail!
export const b = 'b';

Best Practices

1. One module per file
2. Use named exports for multiple values
3. Use default export for single main value
4. Create barrel files for directories
5. Avoid circular dependencies
6. Import at the top of files