JavaScript Modules: Import and Export

// IIFE pattern — manual encapsulation
const MathUtils = (function() {
    const PI = 3.14159; // private

    function circleArea(r) {
        return PI * r * r;
    }

    return { circleArea }; // public API
})();

// CommonJS (Node.js) — require/module.exports
const { circleArea } = require('./math-utils');
module.exports = { circleArea, squareArea };

// AMD (RequireJS) — define/require
define(['jquery'], function($) {
    return { render: function() { /* ... */ } };
});

<!-- Classic script: global scope, no import/export -->
<script src="app.js"></script>

<!-- Module script: private scope, supports import/export -->
<script type="module" src="app.js"></script>

<!-- Inline module -->
<script type="module">
    import { greet } from './utils.js';
    greet('World');
</script>

// Export declarations inline
export const PI = 3.14159265;

export function add(a, b) {
    return a + b;
}

export function subtract(a, b) {
    return a - b;
}

export class Calculator {
    multiply(a, b) { return a * b; }
    divide(a, b) {
        if (b === 0) throw new Error('Division by zero');
        return a / b;
    }
}

// OR: export at the end (grouped export list)
const GRAVITY = 9.81;
function square(n) { return n * n; }
function cube(n) { return n * n * n; }

export { GRAVITY, square, cube };

// Export with rename
export { square as pow2, cube as pow3 };

// Default export: a class
export default class UserService {
    constructor(apiUrl) {
        this.apiUrl = apiUrl;
    }

    async getUser(id) {
        const response = await fetch(`${this.apiUrl}/users/${id}`);
        if (!response.ok) throw new Error('User not found');
        return response.json();
    }

    async createUser(data) {
        const response = await fetch(`${this.apiUrl}/users`, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data),
        });
        return response.json();
    }
}

// Default export: a function
export default function formatDate(date) {
    return new Intl.DateTimeFormat('en-US', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
    }).format(new Date(date));
}

// Default export: an anonymous expression
export default {
    apiUrl: 'https://api.example.com',
    timeout: 5000,
    retries: 3,
};

// Basic dynamic import — returns a Promise
async function loadChart() {
    const { Chart } = await import('./Chart.js');
    return new Chart('#canvas', { type: 'bar', data });
}

// Conditional loading — only load if needed
async function handleExport(format) {
    if (format === 'pdf') {
        const { generatePDF } = await import('./pdf-generator.js');
        return generatePDF(data);
    } else if (format === 'csv') {
        const { generateCSV } = await import('./csv-generator.js');
        return generateCSV(data);
    }
}

// Lazy-load on user interaction
button.addEventListener('click', async () => {
    const module = await import('./heavy-feature.js');
    module.default.init(); // default export
});

// Dynamic import with variable path (be careful — bundlers
// can't statically analyze these for tree-shaking)
const locale = navigator.language.split('-')[0];
const { messages } = await import(`./locales/${locale}.js`);

// Promise.all for parallel loading
const [{ Chart }, { DataTable }] = await Promise.all([
    import('./Chart.js'),
    import('./DataTable.js'),
]);

import React, { Suspense, lazy } from 'react';

// Each of these becomes a separate bundle chunk
const Dashboard = lazy(() => import('./Dashboard'));
const Settings = lazy(() => import('./Settings'));
const Analytics = lazy(() => import('./Analytics'));

function App() {
    return (
        <Suspense fallback={<div>Loading...</div>}>
            <Router>
                <Route path="/dashboard" component={Dashboard} />
                <Route path="/settings" component={Settings} />
                <Route path="/analytics" component={Analytics} />
            </Router>
        </Suspense>
    );
}
// Result: users only download the code for the page they visit

// components/Button/Button.jsx
export default function Button({ children, onClick }) { /* ... */ }

// components/Modal/Modal.jsx
export default function Modal({ isOpen, children }) { /* ... */ }

// components/Input/Input.jsx
export { Input, TextArea, Select };

// components/index.js — barrel file
export { default as Button } from './Button/Button';
export { default as Modal } from './Modal/Modal';
export { Input, TextArea, Select } from './Input/Input';

// Now consumers import from one place:
import { Button, Modal, Input } from './components';
// Instead of:
import Button from './components/Button/Button';
import Modal from './components/Modal/Modal';

// Re-export everything from another module
export * from './math.js';

// Re-export with rename (avoids naming conflicts)
export { add as mathAdd } from './math.js';

// Re-export a default as named
export { default as Calculator } from './Calculator.js';

// Re-export a named as default
export { add as default } from './math.js';

// Re-export everything EXCEPT default
export * from './utils.js'; // named only — doesn't include default

{
    "name": "my-app",
    "version": "1.0.0",
    "type": "module",
    "scripts": {
        "start": "node src/index.js"
    }
}

// src/utils.js
export function formatCurrency(amount, currency = 'USD') {
    return new Intl.NumberFormat('en-US', {
        style: 'currency',
        currency,
    }).format(amount);
}

export const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// src/index.js — must use .js extension
import { formatCurrency, sleep } from './utils.js';

// __dirname and __filename are not available in ESM
// Use import.meta.url instead:
import { fileURLToPath } from 'url';
import { dirname } from 'path';

const __filename = fileURLToPath(import.meta.url);
const __dirname = dirname(__filename);

console.log(formatCurrency(1234.56)); // $1,234.56
await sleep(100);
console.log('Done', __dirname);