Módulos en JavaScript (ES Modules)

A medida que tu aplicación crece en tamaño, poner miles de líneas de código en un solo archivo .js se vuelve imposible de mantener.

JavaScript moderno resuelve esto con Módulos. Un módulo te permite separar tu código en múltiples archivos más pequeños, de propósito específico, e importar piezas de código de un archivo a otro según los necesites.

Para que esto funcione en navegadores, las etiquetas <script> en HTML deben declarar type="module", o más frecuentemente, utilizarás empaquetadores como Vite, Webpack o frameworks como React/Next.js o NodeJS.

Exportaciones Nombradas (export)

Puedes exportar múltiples funciones, variables o clases desde un único archivo. Tienes que usar el nombre exacto al importarlas.

Archivo: matematicas.js

// Exportando al momento de declarar (Suelen ser utilidades matemáticas puras)
export const pi = 3.14159;

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

const restar = (a, b) => a - b;
export { restar }; // Exportar después de declarar

Archivo: main.js (Consumiendo las matemáticas)

// Usando 'import { nombres exactos } from "./ruta"'
import { sumar, pi, restar } from './matematicas.js';

console.log(`El valor de PI es ${pi}`);
console.log(`2 + 2 = ${sumar(2, 2)}`);

Exportación por Defecto (export default)

Se usa cuando un archivo tiene una única función o clase principal que exportar (muy común en componentes de React o clases principales). Solo puede haber UN default por archivo. No requiere usar llaves {} al importar, y de hecho puedes cambiarle el nombre libremente al importarlo.

Archivo: Usuario.js

export default class Usuario {
    constructor(nombre) {
        this.nombre = nombre;
    }
    
    saludar() {
        console.log(`Hola, soy ${this.nombre}`);
    }
}

// Nota: No se puede exportar variables declaradas con let/const directamente como default en la misma línea.

Archivo: app.js (Consumiendo la clase)

// Sin llaves porque es un 'default export'. 
// "UserClass" es un alias arbitrario que yo elegí aquí.
import UserClass from './Usuario.js';

const nuevoUsuario = new UserClass("Ana");
nuevoUsuario.saludar(); // Hola, soy Ana

Combinando Ambos

Es posible (y muy útil) que un archivo tenga un export por defecto Y exportaciones nombradas al mismo tiempo.

/* Archivo: utils.js */
export const helperUno = "Dato 1";
export const helperDos = "Dato 2";
export default function funcionPrincipal() { ... }

/* Archivo: app.js */
import defaultFunc, { helperUno, helperDos } from './utils.js';

Separar responsabilidades mediante los módulos de ECMAScript (ESM) es la base fundamental de cómo organizamos la arquitectura de proyectos JS robustos hoy en día.