Dividir el código en piezas reutilizables es una de las prácticas más importantes del JavaScript moderno, y aquí es donde entran los ES Modules. Si trabajas con proyectos actuales, tanto en el navegador como en Node.js, este es el sistema de módulos que vas a usar para organizar tu lógica, importar funciones y mantener tu código limpio.
¿Qué tipos de módulos existen en JavaScript?
A lo largo del tiempo, JavaScript ha tenido cuatro sistemas de módulos, pero solo uno es el estándar actual. Conocerlos te ayuda a leer código antiguo y a migrarlo cuando sea necesario [0:10].
- ES Modules (ESM): el estándar moderno, usado en navegador y Node.js. Es el recomendado hoy.
- CommonJS: era el sistema clásico de Node.js. Pasó a estado legacy desde que Node.js dio soporte a ESM.
- AMD (Asynchronous Module Definition): usa
require para llamar archivos. Está obsoleto.
- UMD (Universal Module Definition): más un patrón de envoltura para funciones. También obsoleto.
¿Cuál es el sistema de módulos recomendado en JavaScript hoy? ES Modules. Funciona tanto en el navegador como en Node.js y es el estándar moderno que usan las aplicaciones actuales.
¿Por qué conviene dividir tu código en módulos?
Usar módulos no es solo una cuestión de orden, es una forma de pensar tu aplicación. Cada archivo cumple una función específica y eso cambia cómo mantienes el proyecto [1:50].
- Separación de responsabilidad: cada módulo hace una sola cosa.
- Reutilización: importas únicamente lo que necesitas.
- Mantenibilidad: encontrar errores y modificar código se vuelve más sencillo.
- Encapsulamiento: solo expones lo necesario hacia afuera.
¿Cómo se usan export e import en ES Modules?
La sintaxis se basa en dos palabras reservadas: export para exponer lo que un archivo ofrece, e import para traerlo a otro archivo. Vamos a un ejemplo concreto con un archivo math.js [2:40].
Crear un archivo que exporta funciones
Dentro de math.js defines lo que quieres compartir. Puedes exportar constantes y funciones colocando la palabra export antes de cada declaración.
javascript
export const pi = 3.14159;
export function sumar(a, b) {
return a + b;
}
export function restar(a, b) {
return a - b;
}
Este archivo concentra toda la lógica matemática: la constante pi y las funciones sumar y restar. Nada más vive ahí.
Importar funciones desde otro archivo
En tu archivo principal, por ejemplo 17-module.js, traes solo lo que necesitas usando import ... from.
javascript
import { sumar, restar } from './math.js';
console.log(sumar(4, 4)); // 8
console.log(restar(4, 2)); // 2
Si no necesitas pi, no lo importas. Esa selectividad es parte del valor de los módulos.
¿Qué hace export en JavaScript? Marca una variable o función para que pueda ser usada desde otros archivos mediante import. Lo que no exportas, queda privado del módulo.
¿Cómo configuro Node.js para usar ES Modules?
Si ejecutas el código y aparece un error indicando que module no está definido, significa que tu proyecto está configurado en CommonJS. Necesitas cambiar el tipo en el archivo package.json [5:20].
Abre package.json y agrega o modifica la propiedad type:
{
"type": "module"
}
Con ese cambio, Node.js reconoce el sistema ESM y procesa correctamente los import y export de todos los archivos del proyecto.
¿Cómo aplico módulos en un proyecto real?
La mejor forma de entenderlo es separar la lógica de un proyecto que ya tienes. Imagina un formulario con dos funcionalidades: opiniones y contacto. Cada una puede vivir en su propio archivo dentro de una carpeta modules [7:30].
Encapsular la lógica de opiniones
Creas opinions.js y mueves todo lo relacionado con opiniones ahí. Las funciones internas, como las que renderizan o leen, no necesitan exportarse porque solo se usan dentro del módulo. Solo exportas la función de inicialización.
javascript
export function initOpinions() {
const list = opinions;
renderOpinions(list);
}
Encapsular la lógica de contacto
Lo mismo aplica para contact.js. Envuelves la lógica del formulario en una función initContact y la exportas.
javascript
export function initContact() {
// toda la lógica del formulario
}
Llamar los módulos desde app.js
En tu archivo principal app.js, importas las dos funciones de inicialización y las ejecutas.
javascript
import { initOpinions } from './modules/opinions.js';
import { initContact } from './modules/contact.js';
initContact();
initOpinions();
Ahora cada archivo tiene una responsabilidad clara y app.js solo orquesta. Si necesitas modificar el formulario, sabes exactamente dónde ir.
¿Tener muchos archivos afecta el rendimiento?
No te preocupes por terminar con múltiples archivos. Los procesos modernos de JavaScript interpretan todo ese código y lo pueden empaquetar en un solo archivo final que la máquina entiende. Tú ganas claridad durante el desarrollo, y la máquina cumple con el objetivo de tu programa sin importar cuántos archivos hayas escrito.
Cuéntame en los comentarios cómo estás organizando tus módulos en tu proyecto actual.
