JavaScript-Module: import und export verstehen

Sobald ein Projekt über ein paar Zeilen hinauswächst, willst du deinen Code nicht mehr in einer einzigen riesigen Datei haben. Genau dafür gibt es Module: Du teilst deinen Code in mehrere Dateien auf, jede mit einer klaren Aufgabe, und verbindest sie über import und export. In diesem Beitrag schauen wir uns an, wie das moderne Modulsystem von JavaScript – die sogenannten ES-Module – funktioniert und wie du es sauber einsetzt.

Warum überhaupt Module?

Vor den ES-Modulen war jede <script>-Datei Teil eines einzigen globalen Namensraums. Zwei Dateien mit einer Variable user haben sich gegenseitig überschrieben – ein Rezept für schwer auffindbare Fehler. Module lösen das gleich mehrfach:

• Kapselung: Alles in einem Modul ist standardmäßig privat. Nur was du explizit exportierst, ist von außen sichtbar.
• Wiederverwendbarkeit: Eine Funktion einmal schreiben und überall importieren.
• Übersicht: An den Imports oben in einer Datei siehst du sofort, wovon sie abhängt.

Named Exports: mehrere Dinge exportieren

Der häufigste Fall: Du hast eine Datei mit mehreren Hilfsfunktionen und möchtest sie einzeln nutzbar machen. Dafür setzt du einfach das Schlüsselwort export vor die Deklaration.

// mathe.js
export function addiere(a, b) {
  return a + b;
}

export function multipliziere(a, b) {
  return a * b;
}

export const PI = 3.14159;

Beim Importieren gibst du die Namen in geschweiften Klammern an. Wichtig: Die Namen müssen exakt übereinstimmen, denn sie sind der Schlüssel, über den das Modul die Werte bereitstellt.

// app.js
import { addiere, PI } from "./mathe.js";

console.log(addiere(2, 3)); // 5
console.log(PI);            // 3.14159

Du musst nicht alles importieren – nur das, was du wirklich brauchst. Das hält deinen Code schlank und macht Abhängigkeiten sichtbar.

Default Export: das eine Hauptding pro Datei

Manchmal exportiert eine Datei genau eine zentrale Sache – zum Beispiel eine Klasse oder eine Konfiguration. Dafür gibt es den default-Export. Pro Datei ist nur ein einziger davon erlaubt.

// User.js
export default class User {
  constructor(name) {
    this.name = name;
  }

  begruessung() {
    return `Hallo, ${this.name}!`;
  }
}

Beim Import lässt du die geschweiften Klammern weg und darfst den Namen frei wählen – er ist nicht an den Namen im Modul gebunden:

// app.js
import User from "./User.js";

const anna = new User("Anna");
console.log(anna.begruessung()); // Hallo, Anna!

Umbenennen und Sammel-Importe

Was, wenn zwei Module eine Funktion mit demselben Namen exportieren? Oder ein Name in deinem Kontext missverständlich ist? Mit as benennst du beim Import um:

import { addiere as summe } from "./mathe.js";

console.log(summe(4, 5)); // 9

Manchmal möchtest du auch alles aus einem Modul unter einem gemeinsamen Namen bündeln. Das geht mit dem Stern-Import, der dir ein Objekt mit allen named exports gibt:

import * as mathe from "./mathe.js";

console.log(mathe.addiere(1, 2)); // 3
console.log(mathe.PI);            // 3.14159

Du kannst named und default exports übrigens problemlos kombinieren – der default steht dann außerhalb der Klammern: import User, { PI } from "./modul.js";.

Module im Browser und in Node.js

Damit der Browser eine Datei als Modul behandelt, brauchst du beim Script-Tag das Attribut type="module". Erst dann funktionieren import und export:

<script type="module" src="app.js"></script>

Ein paar Dinge sind dann automatisch anders: Module laufen immer im strict mode, jede Datei hat ihren eigenen Scope, und Imports werden nur einmal ausgewertet – auch wenn du dasselbe Modul mehrfach importierst. In Node.js nutzt du ES-Module, indem du entweder die Dateiendung .mjs verwendest oder in deiner package.json den Eintrag "type": "module" setzt. Ältere Node-Projekte setzen stattdessen oft noch auf require und module.exports (das sogenannte CommonJS) – für neuen Code sind ES-Module aber der empfohlene Standard.

Fazit

ES-Module sind das Rückgrat moderner JavaScript-Projekte. Mit named exports stellst du mehrere Werte gezielt bereit, mit dem default export die eine zentrale Sache einer Datei, und mit as sowie dem Stern-Import behältst du auch bei vielen Abhängigkeiten den Überblick. Fang am besten klein an: Lagere eine Handvoll Hilfsfunktionen in eine eigene Datei aus und importiere sie dort, wo du sie brauchst. Du wirst schnell merken, wie viel aufgeräumter sich dein Code anfühlt – und wie leicht sich einzelne Bausteine später in anderen Projekten wiederverwenden lassen.