Módulos ESM: import / export

Cuando un programa crece, tener todo en un solo archivo se vuelve incómodo. El JavaScript moderno resuelve el problema con los módulos ES (ESM): cada archivo es un módulo que puede exportar funciones, constantes, clases, y otros archivos pueden importarlas.

export

Exportas lo que quieres hacer público. Dos formas:

// somma.js
export function somma(a, b) {
  return a + b;
}

export const PI = 3.14159;

O bien, al final del archivo:

function somma(a, b) {
  return a + b;
}
const PI = 3.14159;
export { somma, PI };

import

Desde otro archivo:

// app.js
import { somma, PI } from './somma.js';

console.log(somma(1, 2)); // 3
console.log(PI); // 3.14159

El objeto { somma, PI } es la lista de los nombres que quieres importar. Deben coincidir con los nombres exportados.

Default export

Cada módulo puede tener un export "principal", sin nombre:

// log.js
export default function log(msg) {
  console.log('[app]', msg);
}

Se importa eligiendo localmente el nombre:

import log from './log.js';
log('ciao');

Renombrar

import { somma as plus } from './somma.js';
export { somma as add } from './somma.js'; // re-export

Un solo "namespace" por archivo

Los módulos están aislados: una variable declarada en un archivo no termina en el ámbito global. Debes exportarla explícitamente para que sea visible en otros lugares. Esto es una gran mejora con respecto al antiguo JS en el que cada <script> compartía window.

Pruébalo tú

En los ejercicios a continuación no escribirás la sintaxis real de import/export, ya que el sandbox consta de un solo archivo. En su lugar, te pediremos que organices el código en pequeñas funciones separadas que colaboren entre sí, tal como lo harías si cada una estuviera en un archivo diferente.

Ejercicio de repaso