Teoría: Módulos

Cuando programas, es muy útil dividir tu código en partes pequeñas llamadas módulos. Dividir tu código en módulos hace que puedas trabajar mejor y evitar copiar y pegar código.

Así, cada archivo puede compartir solo lo que necesita y usar lo que otros ofrecen.

Exportar cosas desde un archivo

Imagina que tienes un archivo llamado math.js donde guardas funciones y números que quieres usar en otras partes:

// math.js — módulo con funciones matemáticas

// Aquí “exportamos” estas cosas para que otros archivos puedan usarlas
export const pi = 3.14;
export const square = (x) => x * x;

// Esta es la exportación principal del módulo, solo puede haber una así
export default function surfaceArea(r) {
  return 4 * pi * square(r);
}

• Las dos primeras son exportaciones “nombradas”, porque les pusiste nombre (pi y square).
• La última es la exportación “por defecto”, que normalmente es la función o dato principal que quieres compartir.

Cómo importar esas cosas en otro archivo

Supongamos que tenemos otro archivo llamado planets.js y queremos usar las funciones y números de math.js. Entonces:

// planets.js — aquí usamos lo que exportamos antes

// Traemos solo lo que necesitamos usando llaves {}
import { square, pi } from './math.js';

// Traemos la exportación por defecto sin llaves
import surfaceArea from './math.js';

console.log(surfaceArea(5));  // Calcula y muestra el área de la superficie
console.log(square(10));      // Calcula y muestra el cuadrado de 10
console.log(pi);              // Muestra el valor de pi

• Las exportaciones nombradas se importan entre {}.
• La exportación por defecto se importa sin {} y puedes darle el nombre que quieras.

Traer todo junto con un alias

Si quieres, puedes importar todo el contenido de un módulo bajo un nombre (alias), y luego usarlo con ese nombre:

import * as math from './math.js';

console.log(math.pi);
console.log(math.square(5));
console.log(math.default(10)); // La función por defecto está en math.default

No olvides la extensión .js

Cuando importas módulos, debes poner siempre la extensión .js al final del archivo:

import { pi } from './math.js';  // Así es correcto
import { pi } from './math';     // Así da error en muchos navegadores y entornos

Esto es importante para que JavaScript sepa qué archivo cargar.

¿Por qué usar módulos?

• Te ayuda a organizar tu código y que sea más fácil de entender.
• Puedes reutilizar funciones y datos en varios archivos sin tener que copiar y pegar.
• Facilita el trabajo en equipo porque cada quien puede trabajar en módulos distintos.
• Es la forma moderna y recomendada de estructurar proyectos en JavaScript.