Guías Técnicas

Guía Completa sobre Export e Import en JavaScript

En JavaScript, los módulos son una forma de organizar y reutilizar código. Los módulos permiten dividir el código en archivos separados y cargarlos cuando sea necesario, lo cual facilita la gestión de proyectos grandes. La palabra clave export se utiliza para hacer que algo sea accesible desde otro archivo, y import se usa para cargar esos elementos.

Exportación de una variable

La palabra clave export se utiliza para hacer que una variable, función, clase o incluso un objeto sea accesible fuera del archivo donde se define.

Ejemplo:

javascript 
// archivo1.js
export const mensaje = "Hola, Mundo!";
javascript 
// archivo2.js
import { mensaje } from './archivo1.js';
console.log(mensaje);  // Salida: Hola, Mundo!

Aquí, la constante mensaje se exporta desde archivo1.js y luego se importa en archivo2.js para usarla.

Exportación de una función

Puedes exportar una función para que esté disponible en otros módulos. Ejemplo:

javascript 
// archivo1.js
export function saludar(nombre) {
  return `Hola, ${nombre}!`;
}
javascript 
// archivo2.js
import { saludar } from './archivo1.js';
console.log(saludar('Juan'));  // Salida: Hola, Juan!

La función saludar se exporta desde archivo1.js y se importa en archivo2.js para ser utilizada.

Exportación por defecto

La exportación por defecto te permite exportar un solo valor desde un módulo. Puedes exportar una función, clase u objeto como valor predeterminado del archivo. Ejemplo:

javascript 
// archivo1.js
export default function despedir(nombre) {
  return `Adiós, ${nombre}!`;
}
javascript 
// archivo2.js
import despedir from './archivo1.js';
console.log(despedir('Juan'));  // Salida: Adiós, Juan!

En este caso, despedir es exportado por defecto desde archivo1.js y se importa sin llaves en archivo2.js.

Exportación de múltiples elementos

Puedes exportar varios elementos desde un solo archivo. Ejemplo:

javascript 
// archivo1.js
export const nombre = "Juan";
export const edad = 30;
javascript 
// archivo2.js
import { nombre, edad } from './archivo1.js';
console.log(nombre);  // Salida: Juan
console.log(edad);    // Salida: 30

Aquí, tanto nombre como edad se exportan desde archivo1.js y se importan en archivo2.js.

Importación de todo el módulo

Puedes importar todo el contenido de un módulo en un solo objeto. Ejemplo:

javascript 
// archivo1.js
export const nombre = "Juan";
export const edad = 30;
export function saludar() {
  return "Hola!";
}
javascript 
// archivo2.js
import * as persona from './archivo1.js';
console.log(persona.nombre);  // Salida: Juan
console.log(persona.edad);    // Salida: 30
console.log(persona.saludar());  // Salida: Hola!

En este contexto, todo el módulo archivo1.js se importa bajo el nombre persona, y sus elementos se acceden a través de persona.nombre, persona.edad, etc.

Reexportar elementos

Puedes reexportar elementos de otro módulo. Esto es útil cuando se desea consolidar varios módulos en uno solo. Ejemplo:

javascript 
// archivo1.js
export const saludo = "Hola";

// archivo2.js
export const despedida = "Adiós";

// archivo3.js
export { saludo } from './archivo1.js';
export { despedida } from './archivo2.js';
javascript 
// archivo4.js
import { saludo, despedida } from './archivo3.js';
console.log(saludo);     // Salida: Hola
console.log(despedida);  // Salida: Adiós

Aquí, archivo3.js reexporta saludo de archivo1.js y despedida de archivo2.js, y luego archivo4.js los importa desde archivo3.js.

  Conclusión

El uso de export e import en JavaScript te permite estructurar tu código de manera más modular y reutilizable. Ya sea que trabajes con exportaciones nombradas, exportaciones por defecto, o incluso reexportaciones, estos conceptos son fundamentales para trabajar con módulos en JavaScript.