Exportaciones por defecto vs. nombradas

En los módulos de JavaScript, tienes dos formas principales de exportar tu código: exportaciones named y exportaciones default.

Exportaciones con nombre te permiten exportar varios valores desde un módulo:

// math.js
export function add(a, b) {
    return a + b;
}
export function subtract(a, b) {
    return a - b;
}

Al importar exportaciones con nombre, debes usar exactamente los mismos nombres dentro de las llaves:

// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3));      // 8
console.log(subtract(10, 4)); // 6

Si necesitas cambiar el nombre de una importación con nombre, usa la palabra clave as para crear un alias:

// app.js
import { add as sum, subtract as minus } from './math.js';

console.log(sum(5, 3));   // 8
console.log(minus(10, 4)); // 6

Las exportaciones predeterminadas te permiten exportar un único valor principal desde un módulo:

// user.js
const user = {
  name: 'John',
  age: 30
};

export default user;

Al importar una exportación predeterminada, puedes usar cualquier nombre que quieras sin llaves:

// app.js
import person from './user.js';

console.log(person.name); // 'John'

¿Cuándo usar cuál? Usa exportaciones con nombre cuando un módulo proporcione varias utilidades relacionadas (por ejemplo, una colección de funciones auxiliares). Usa una exportación predeterminada cuando un módulo tenga un propósito principal o un valor principal (por ejemplo, una clase, un componente o un objeto de configuración).

Puedes combinar ambos tipos de exportaciones en un solo módulo:

// vehicle.js
export const wheels = 4;
export const doors = 4;

const car = {
  brand: 'Toyota',
  model: 'Corolla'
};

export default car;

Y impórtalos juntos:

// app.js
import myCar, { wheels, doors } from './vehicle.js';

console.log(myCar.brand);  // 'Toyota'
console.log(wheels);       // 4