What are JavaScript Modules?

// math.js
export const PI = 3.14159;
export function add(a, b) {
  return a + b;
}
export function multiply(a, b) {
  return a * b;
}

// main.js
import { PI, add, multiply } from './math.js';
import { add as sum } from './math.js'; // Rename
import * as math from './math.js'; // Import all
math.add(1, 2);

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

// main.js
import User from './User.js';
import MyUser from './User.js'; // Can use any name

// api.js
export default function fetchData() { }
export const BASE_URL = 'https://api.example.com';

// main.js
import fetchData, { BASE_URL } from './api.js';

// Lazy loading
const button = document.querySelector('#loadModule');
button.addEventListener('click', async () => {
  const module = await import('./heavyModule.js');
  module.doSomething();
});

// Conditional import
if (condition) {
  const { feature } = await import('./feature.js');
}