Modulos

Modulos en JavaScript

Los modulos te permiten dividir tu codigo en archivos separados y reutilizables. ES Modules (ESM) es el sistema de modulos estandar en JavaScript moderno.

Exportando

// matematicas.js

// Export con nombre (named exports)
export const PI = 3.14159;

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

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

// Export al final (alternativa)
const multiplicar = (a, b) => a * b;
const dividir = (a, b) => a / b;

export { multiplicar, dividir };

// Export con nombre diferente
export { multiplicar as mult };

Export Default

// Usuario.js

// Solo puede haber UN export default por archivo
export default class Usuario {
  constructor(nombre) {
    this.nombre = nombre;
  }

  saludar() {
    return `Hola, soy ${this.nombre}`;
  }
}

// O con funcion
// export default function crearUsuario(nombre) { ... }

// Puedes combinar default y named exports
export const ROLES = ["admin", "usuario", "invitado"];

Importando

// app.js

// Importar named exports (usa llaves)
import { sumar, restar, PI } from "./matematicas.js";

console.log(sumar(2, 3)); // 5
console.log(PI); // 3.14159

// Importar con alias
import { multiplicar as mult } from "./matematicas.js";

// Importar todo como objeto
import * as Matematicas from "./matematicas.js";
console.log(Matematicas.sumar(2, 3));
console.log(Matematicas.PI);

// Importar default export (sin llaves)
import Usuario from "./Usuario.js";
const usuario = new Usuario("Ana");

// Combinar default y named imports
import Usuario, { ROLES } from "./Usuario.js";

Import Dinamico

// Cargar modulos bajo demanda (code splitting)
async function cargarModulo() {
  const modulo = await import("./modulo-grande.js");
  modulo.hacerAlgo();
}

// Util para:
// - Cargar codigo solo cuando se necesita
// - Reducir tamano del bundle inicial
// - Cargar condicionalmente

button.addEventListener("click", async () => {
  const { procesarDatos } = await import("./procesador.js");
  procesarDatos();
});

Usando Modulos en el Navegador

<!-- En HTML, usa type="module" -->
<script type="module" src="app.js"></script>

<!-- O inline -->
<script type="module">
  import { saludar } from "./utilidades.js";
  saludar();
</script>

<!-- Los modulos tienen alcance propio -->
<!-- Se cargan de forma diferida por defecto -->
<!-- Siempre se ejecutan en modo estricto -->