Default- vs. benannte Exports

In JavaScript-Modulen hast du zwei Hauptmöglichkeiten, deinen Code zu exportieren: benannte Exporte und Standardexporte.

Benannte Exporte ermöglichen es dir, mehrere Werte aus einem Modul zu exportieren:

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

Beim Importieren benannter Exporte musst du innerhalb der geschweiften Klammern exakt dieselben Namen verwenden:

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

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

Wenn du einen benannten Import umbenennen musst, verwende das Schlüsselwort as, um einen Alias zu erstellen:

// 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 ermöglichen es dir, einen einzelnen Hauptwert aus einem Modul zu exportieren:

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

export default user;

Beim Importieren eines default-Exports kannst du ohne geschweifte Klammern einen beliebigen Namen verwenden:

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

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

Wann welches verwenden? Verwende benannte Exporte, wenn ein Modul mehrere zusammengehörige Dienstprogramme bereitstellt (z. B. eine Sammlung von Hilfsfunktionen). Verwende einen Standardexport, wenn ein Modul einen Hauptzweck oder einen zentralen Wert hat (z. B. eine Klasse, eine Komponente oder ein Konfigurationsobjekt).

Du kannst beide Exporttypen in einem einzigen Modul kombinieren:

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

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

export default car;

Und importiere sie gemeinsam:

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

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