Eksporty domyślne a nazwane

W modułach JavaScript masz dwa główne sposoby eksportowania kodu: eksporty nazwane i eksport domyślny.

Eksporty nazwane pozwalają eksportować wiele wartości z modułu:

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

Podczas importowania eksportów nazwanych musisz używać dokładnie tych samych nazw w nawiasach klamrowych:

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

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

Jeśli chcesz zmienić nazwę importu nazwanego, użyj słowa kluczowego as, aby utworzyć 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

Eksporty domyślne pozwalają eksportować pojedynczą główną wartość z modułu:

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

export default user;

Podczas importowania eksportu domyślnego możesz użyć dowolnej nazwy bez nawiasów klamrowych:

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

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

Kiedy używać którego? Używaj eksportów nazwanych, gdy moduł udostępnia wiele powiązanych narzędzi (np. zbiór funkcji pomocniczych). Używaj eksportu domyślnego, gdy moduł ma jeden główny cel lub główną wartość (np. klasę, komponent lub obiekt konfiguracji).

Możesz połączyć oba typy eksportów w jednym module:

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

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

export default car;

Zaimportuj je razem:

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

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