JavaScript ES6: Die verschiedenen Import- und Export-Typen im Überblick

Published on 7. Oktober 2025

In der modernen JavaScript-Entwicklung ist es unerlässlich, Module effizient zu organisieren und zu verwenden. Mit ES6 (ECMAScript 2015) wurden Import- und Export-Mechanismen eingeführt, die eine klare Struktur für unser Code-Management ermöglichen. In diesem Blog-Post erklären wir dir alle verfügbaren Typen von Imports und Exports in JavaScript – von einfachen Default-Exports bis hin zu komplexen Kombinationen.

📦 Was sind Importe und Exporte?

Bevor wir uns mit den verschiedenen Arten von Exports beschäftigen, ist es wichtig zu verstehen, was Importe und Exporte überhaupt sind:

  • Export: Ermöglicht es dir, Funktionen, Klassen oder Variablen aus einer Datei herauszubringen.
  • Import: Erlaubt es dir, diese exportierten Elemente in eine andere Datei zu laden.

Diese Mechanismen sorgen dafür, dass dein Code modular ist und wiederverwendbar – ein zentraler Baustein für moderne JavaScript-Anwendungen.

🎯 1. Default Exports (Standard-Exporte)

Ein Modul kann nur einen default export haben. Das ist besonders nützlich, wenn du eine Hauptfunktion oder Klasse aus einer Datei exportieren willst.

💡 Beispiel:

// utils.js
export default function greet(name) {
  return `Hallo, ${name}!`;
}

Um diesen Default-Export zu verwenden, musst du ihn ohne geschweifte Klammern importieren:

// main.js
import greet from './utils.js';

console.log(greet("Alice")); // "Hallo, Alice!"

���️ Achte darauf: Bei Default-Exports dürfen keine geschweiften Klammern verwendet werden!

📦 2. Named Exports (Benannte Exporte)

Named Exports erlauben es dir, mehrere Funktionen, Klassen oder Variablen aus einer Datei zu exportieren. Sie werden mit geschweiften Klammern importiert.

💡 Beispiel:

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

export class Calculator {
  static multiply(a, b) {
    return a * b;
  }
}

Importieren lässt sich das so:

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

console.log(add(2, 3)); // 5
console.log(Calculator.multiply(2, 3)); // 6

📌 Bei Named Exports muss der Name exakt mit dem exportierten Namen übereinstimmen.

🔀 3. Kombination von Default- und Named Exports

Ein Modul kann sowohl einen Default- als auch mehrere Named Exports enthalten – das ist sehr nützlich, wenn du eine Hauptfunktion und Hilfsfunktionen bereitstellen willst.

💡 Beispiel:

// config.js
export const apiUrl = 'https://api.example.com';
export const version = '1.0.0';

export default function getConfig() {
  return { apiUrl, version };
}

Importieren kannst du das so:

// main.js
import getConfig, { apiUrl, version } from './config.js';

console.log(getConfig()); // { apiUrl: 'https://api.example.com', version: '1.0.0' }
console.log(apiUrl); // "https://api.example.com"

🔄 4. Re-Export (Weiterleiten von Exporten)

Manchmal möchtest du Exporte aus anderen Modulen weitergeben – ohne sie neu zu schreiben. Dafür gibt es den sogenannten Re-Export.

💡 Beispiel:

// utils.js
export const helper = () => 'helper';
export default function main() { return 'main'; }

// index.js
export { helper } from './utils.js'; // Named Re-Export
export { default as main } from './utils.js'; // Default Re-Export mit Alias

Nun kannst du die Re-Exports wie normale Imports verwenden:

import { helper, main } from './index.js';

🔁 Dies ist besonders praktisch, um eine zentrale API für dein Modul zu erstellen.

🧩 5. Wildcard Imports (Alle Exporte importieren)

Mit import * as kannst du alle Exporte eines Moduls als Objekt importieren – egal ob Named oder Default.

💡 Beispiel:

// allExports.js
export const a = 1;
export const b = 2;
export default function c() { return 'c'; }

Importieren:

// main.js
import * as all from './allExports.js';

console.log(all.a); // 1
console.log(all.default()); // "c"

📌 Diese Methode ist besonders nützlich, wenn du alle Exporte dynamisch nutzen möchtest.

🔁 6. Aliasing (Namensänderung bei Importen)

Wenn du zwei Module mit gleichnamigen Funktionen importieren willst oder einfach einen besseren Namen verwenden möchtest, kannst du Aliase verwenden.

💡 Beispiel:

// user.js
export const firstName = 'John';
export const lastName = 'Doe';

// main.js
import { firstName as fn, lastName as ln } from './user.js';

console.log(fn); // "John"

Auch für Default-Exports:

import { default as myFunc } from './module.js';

Fazit

Die verschiedenen Import- und Export-Typen in JavaScript bieten dir eine flexible und saubere Möglichkeit, dein Projekt modular zu strukturieren. Mit Named Exports kannst du mehrere Funktionen aus einer Datei exportieren, während Default Exports ideal sind, um eine Hauptfunktion zu definieren.

Kombinationen von beidem erlauben es dir, komplexe Module zu erstellen, die sowohl übersichtlich als auch wiederverwendbar sind. Re-Exports helfen dabei, einheitliche APIs zu schaffen, und Aliase sorgen für Flexibilität bei Namenskonflikten.

Verwende die richtigen Export-Typen, um deine JavaScript-Anwendung sauber, wartbar und skalierbar zu gestalten – und profitiere von den Vorteilen moderner ES6-Module!

Previous

Next