Export e Import

Un módulo es como una casa con la puerta cerrada: lo que hay dentro no se ve desde fuera. Para compartir código entre archivos necesitas dos palabras clave: export, que decide qué sale, e import, que lo trae a donde hace falta.

Export: compartiendo código#

Por defecto, nada de lo que declaras en un módulo es accesible desde fuera. Lo que quieras compartir tienes que marcarlo de forma explícita con export.

Named Exports (exportaciones nombradas)

Es la forma más habitual: pones export delante de la declaración. Vale para variables, funciones, clases...

// operaciones.jsexport function sumar(a, b) {  return a + b}export function restar(a, b) {  return a - b}export const PI = 3.14159

Si lo prefieres, puedes declararlo todo de forma normal y exportarlo junto al final del archivo:

// operaciones.jsfunction sumar(a, b) {  return a + b}function restar(a, b) {  return a - b}const PI = 3.14159export { sumar, restar, PI }

Las dos formas son equivalentes. Usa la que prefieras.

Export Default (exportación por defecto)

Cuando un módulo tiene un elemento principal, puedes marcarlo como exportación por defecto. Es lo que suele hacerse con un archivo que contiene una sola clase:

// Usuario.jsexport default class Usuario {  constructor(nombre) {    this.nombre = nombre  }  saludar() {    return `Hola, soy ${this.nombre}`  }}

También sirve para funciones:

// formatear.jsexport default function formatear(texto) {  return texto.trim().toLowerCase()}

Combinar Named Exports y Default Export

Las dos formas no se excluyen. Un módulo puede tener un default export y varios named exports a la vez:

// math.jsexport default function sumar(a, b) {  return a + b}export function restar(a, b) {  return a - b}export function multiplicar(a, b) {  return a * b}export const PI = 3.14159

Import: usando código de otros módulos#

Ahora toca la otra mitad: traer ese código con import. Cómo se escribe depende de cómo se exportó.

Importar Named Exports

Los named exports se importan entre llaves {}, usando el nombre exacto con el que se exportaron:

// app.jsimport { sumar, restar, PI } from './operaciones.js'console.log(sumar(2, 3))  // -> 5console.log(restar(10, 4)) // -> 6console.log(PI)            // -> 3.14159

Los nombres deben coincidir exactamente con los de la exportación. No puedes inventarte otros (bueno, sí puedes, pero con as, que verás en un momento).

Importar un Default Export

El default export se importa sin llaves, y aquí sí puedes ponerle el nombre que quieras:

// app.jsimport Usuario from './Usuario.js'// o podrías llamarlo como quieras:// import Persona from './Usuario.js'const user = new Usuario('Ana')console.log(user.saludar()) // -> 'Hola, soy Ana'

Importar Default y Named juntos

Si el módulo tiene de los dos tipos, puedes traerlos en una sola línea:

// app.jsimport sumar, { restar, multiplicar, PI } from './math.js'console.log(sumar(2, 3))       // -> 5console.log(restar(10, 4))      // -> 6console.log(multiplicar(3, 4))  // -> 12

El default va primero, sin llaves, y los named van después, entre llaves.

Renombrar con as#

¿Qué pasa si dos módulos distintos exportan una función con el mismo nombre y necesitas las dos? Chocarían. Para eso está as, que les cambia el nombre.

Renombrar al importar

// Tenemos dos módulos con función 'formatear'import { formatear as formatearTexto } from './texto.js'import { formatear as formatearNumero } from './numero.js'formatearTexto('hola mundo')  // usa la función de texto.jsformatearNumero(1234.5)        // usa la función de numero.js

Renombrar al exportar

También funciona en la otra dirección. Puedes usar un nombre dentro del módulo y exponer otro hacia fuera:

// texto.jsfunction formatearInterno(texto) {  return texto.toUpperCase()}export { formatearInterno as formatear }

Quien importe este módulo solo verá formatear.

Importar todo con *#

Si quieres todo lo que exporta un módulo, usa * as:

// app.jsimport * as Operaciones from './operaciones.js'console.log(Operaciones.sumar(2, 3))  // -> 5console.log(Operaciones.restar(10, 4)) // -> 6console.log(Operaciones.PI)            // -> 3.14159

Esto crea un objeto con todas las exportaciones como propiedades. Viene bien cuando un módulo exporta muchas cosas y no quieres listarlas una a una.

Re-exportar desde otro módulo#

Un módulo puede volver a exportar lo que exporta otro. Sirve para crear archivos índice, que agrupan las exportaciones de varios archivos:

// operaciones/sumar.jsexport function sumar(a, b) {  return a + b}// operaciones/restar.jsexport function restar(a, b) {  return a - b}// operaciones/index.js — Re-exporta todoexport { sumar } from './sumar.js'export { restar } from './restar.js'

Ahora puedes importar desde un único punto, sin saber en qué archivo vive cada función:

// app.jsimport { sumar, restar } from './operaciones/index.js'

También puedes re-exportar todo de un módulo con *:

// operaciones/index.jsexport * from './sumar.js'export * from './restar.js'

Errores comunes#

1. Olvidar las llaves en named imports

Sin llaves, JavaScript busca el default export. Y si el módulo no tiene, falla.

import sumar from './operaciones.js'

import { sumar } from './operaciones.js'

2. Nombre incorrecto en named import

Una letra de menos basta. El módulo exporta sumar, no suma:

import { suma } from './operaciones.js'

import { sumar } from './operaciones.js'

3. Múltiples export default

Solo puede haber uno por módulo. Para exportar varias cosas, usa named exports:

export default function sumar(a, b) { return a + b }export default function restar(a, b) { return a - b } // ❌ segundo default// Con named exports puedes exportar todas las que quierasexport function sumar(a, b) { return a + b } // ✅export function restar(a, b) { return a - b } // ✅

Resumen#