Exportaciones por defecto vs. nombradas

Parte de la sección Programación Orientada a Objetos del Journey de JavaScript de Coddy — lección 10 de 56.

En los módulos de JavaScript, tienes dos formas principales de exportar tu código: exportaciones con nombre (named exports) y exportaciones por defecto (default exports).

Las Exportaciones Nombradas te permiten exportar múltiples 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 llaves:

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

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

Si necesitas renombrar una importación con nombre, utiliza 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

Default Exports (Exportaciones por defecto) te permiten exportar un único valor principal de un módulo:

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

export default user;

Al importar una exportación por defecto, puedes usar cualquier nombre que desees sin llaves:

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

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

¿Cuándo usar cuál? Usa named exports cuando un módulo proporciona múltiples utilidades relacionadas (por ejemplo, una colección de funciones auxiliares). Usa una default export cuando un módulo tiene 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;

E impórtalos juntos:

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

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

Desafío

Fácil

Tienes dos archivos. Tu tarea es configurar las exportaciones en calculator.js y las importaciones en main.js.

En calculator.js: Exporta calculate como default y square como named
En main.js: Importa ambas funciones correctamente

Las pruebas verificarán:

Que se use la exportación por defecto (default export) para calculate
Que se use la exportación nombrada (named export) para square
Que ambas importaciones funcionen correctamente

Hoja de referencia

Exportaciones Nombradas — exporta e importa múltiples valores por su nombre exacto:

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

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

Exportaciones por Defecto — exporta un valor principal; impórtalo con cualquier nombre, sin llaves:

// user.js
export default { name: 'John', age: 30 };

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

Combinando Ambos — la importación por defecto va primero, las importaciones nombradas van entre llaves:

// vehicle.js
export const wheels = 4;
export default { brand: 'Toyota', model: 'Corolla' };

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

Cuándo usar cada uno: usa exportaciones nombradas para múltiples utilidades relacionadas; usa una exportación por defecto para el valor principal único de un módulo (clase, componente, configuración).

Pruébalo tú mismo

// TODO: Importa ambas funciones aquí desde calculator.js


// Prueba
console.log(calculate(10, 5, '+')); // Debería mostrar 15
console.log(square(4));             // Debería mostrar 16