JavaScript Pattern Matching Proposal: match-Ausdruck und strukturelle Musterabgleich

1. Warum switch/case nicht ausreicht

Das switch-Statement in JavaScript hat drei fundamentale Schwächen, die im Alltag ständig zu Workarounds zwingen. Erstens prüft switch nur primitive Gleichheit mit striktem ===-Vergleich – keine Struktur, keine Typen, keine Array-Form. Zweitens ist switch ein Statement, kein Ausdruck: Man kann seinen "Rückgabewert" nicht direkt einer Variablen zuweisen oder in einem Ternär verwenden. Drittens erfordern Fälle ohne explizites break einen Fallthrough, der in der Praxis häufig zu stillen Bugs führt. All das macht Pattern Matching in JavaScript zu einer lang ersehnten Ergänzung.

Das TC39 Pattern Matching Proposal befindet sich seit 2017 im aktiven Entwicklungsprozess und erreichte 2024 Stage 2 – ein Meilenstein, der bedeutet, dass das Komitee die grundlegende Problemstellung anerkennt und aktiv an der Spezifikation arbeitet. Inspiriert von Pattern Matching in Rust (match), OCaml und Haskell bringt es einen strukturellen Abgleich direkt in JavaScript: Ein einzelner match-Ausdruck kann Objekt-Form, Array-Länge, Typ-Instanz und primitive Werte gleichzeitig prüfen – in einer lesbaren, deklarativen Syntax ohne verschachtelte if-Ketten.

2. Grundsyntax: match-Ausdruck und when-Klauseln

Der match-Ausdruck in JavaScript folgt einem klaren Muster: match (subject) { when (pattern) => expression }. Das Subjekt wird genau einmal ausgewertet und dann gegen jede when-Klausel von oben nach unten geprüft. Die erste Klausel, deren Muster passt, liefert das Ergebnis des gesamten match-Ausdrucks. Da match ein Ausdruck ist, kann sein Wert direkt einer Variable zugewiesen, in einer Arrow-Funktion zurückgegeben oder als Argument übergeben werden – ohne Hilfs-Variable oder IIFE.

Das einfachste Muster ist ein primitiver Wert: when (42) passt, wenn das Subjekt exakt 42 ist. Mehrere Werte können in einer Klausel mit dem or-Operator kombiniert werden: when (1 or 2 or 3). Eine _-Klausel oder eine abschließende when-Klausel ohne Muster dient als Default-Fall, der immer passt. Wenn kein Muster passt und kein Default vorhanden ist, wirft der match-Ausdruck einen MatchError – ein explizites Versagen statt eines stillen undefined, wie es bei switch ohne default der Fall ist.

// Basic match expression — evaluates to a value (expression, not statement)
const status = "pending";

const label = match (status) {
  when ("pending")   => "Ausstehend";
  when ("shipped")   => "Versandt";
  when ("delivered") => "Zugestellt";
  when ("cancelled") => "Storniert";
  // Default: MatchError if no match — forces exhaustive handling
  when (_)           => "Unbekannter Status";
};

console.log(label); // "Ausstehend"

// match is an expression — usable directly in JSX/template literals
const message = `Bestellung ist ${match (status) {
  when ("pending")   => "noch in Bearbeitung";
  when ("shipped")   => "bereits unterwegs";
  when ("delivered") => "angekommen";
  when (_)           => "im unbekannten Zustand";
}}`;

// Multiple values per clause with 'or'
const isActive = match (status) {
  when ("pending" or "shipped") => true;
  when (_)                      => false;
};

3. Strukturelle Muster: Objekte und Arrays testen

Das mächtigste Feature des Pattern Matching Proposals ist der strukturelle Musterabgleich: Ein Objekt-Muster wie { type: "error", code: 404 } passt auf jedes Objekt, das mindestens diese Eigenschaften mit diesen Werten enthält. Das Subjekt kann weitere Eigenschaften haben – das Muster prüft nur die definierten Schlüssel. Array-Muster wie [first, ...rest] prüfen die Array-Form und binden gleichzeitig Teile des Arrays an Variablen – identisch zur Destrukturierung, aber mit der zusätzlichen Semantik des Abgleichs.

Verschachtelte Muster sind vollständig unterstützt: { user: { role: "admin" }, action: "delete" } prüft in einem einzigen when-Ausdruck gleichzeitig die äußere Struktur und einen tief verschachtelten Wert. Ohne Pattern Matching würde das eine Kette aus &&-Operatoren und optionalen Chainings erfordern, die bei jeder Änderung der Datenstruktur manuell angepasst werden muss. Der strukturelle Abgleich macht diese Bedingungen deklarativ und wartbar.

// Structural pattern matching — object and array patterns
const response = { status: 404, body: { message: "Not Found" }, headers: {} };

const result = match (response) {
  // Object pattern: checks shape, binds variables
  when ({ status: 200, body: { data } })  => `Success: ${JSON.stringify(data)}`;
  when ({ status: 404, body: { message } }) => `Not found: ${message}`;
  when ({ status: 500 })                  => "Server error — please retry";
  when ({ status: s }) if (s >= 400)     => `Client error: ${s}`;
  when (_)                               => "Unknown response";
};

// Array pattern: check form and destructure simultaneously
const parseCommand = (args) => match (args) {
  when ([])                          => "No arguments";
  when (["help" or "--help"])        => "Show help";
  when (["--file", filename])        => `Read file: ${filename}`;
  when (["--output", out, ...rest])  => `Output to ${out}, extra: ${rest}`;
  when ([cmd, ...params])            => `Command: ${cmd} with ${params.length} params`;
};

console.log(parseCommand(["--file", "data.json"])); // "Read file: data.json"
console.log(parseCommand(["build", "src", "dist"])); // "Command: build with 2 params"

4. Guards: Zusatzbedingungen in when-Klauseln

Guards sind optionale boolesche Bedingungen, die nach dem Muster einer when-Klausel mit dem Schlüsselwort if hinzugefügt werden. Ein Muster kann strukturell passen, aber der Guard kann die Klausel trotzdem ablehnen – dann wird mit der nächsten Klausel weitergemacht. Guards sind besonders nützlich für numerische Vergleiche (if (n > 0 && n < 100)), Längenprüfungen oder komplexe boolesche Logik, die sich nicht allein durch strukturelle Muster ausdrücken lässt.

Innerhalb eines Guards stehen alle im Muster gebundenen Variablen zur Verfügung. Ein Muster wie { amount } bindet den Wert der Eigenschaft amount, und der Guard if (amount > 1000) kann ihn direkt verwenden. Diese Kombination aus strukturellem Muster und booleschen Guards macht Pattern Matching zum ausdrucksstärksten Kontrollfluss-Mechanismus in JavaScript – weit mächtiger als switch/case, ohne die Lesbarkeit zu opfern.

5. Matchlets: Bindung und Wiederverwendung von Teilmustern

Matchlets sind benannte Teilmuster, die als const matchlet = pattern definiert und in mehreren when-Klauseln wiederverwendet werden können. Sie ermöglichen das DRY-Prinzip (Don't Repeat Yourself) im Pattern Matching: Statt dasselbe komplexe Teilmuster in fünf verschiedenen Klauseln zu wiederholen, wird es einmal als Matchlet definiert und überall referenziert. Das verbessert die Lesbarkeit und macht Änderungen an einem häufig genutzten Teilmuster zum Einzeiler.

Ein Matchlet für eine Fehlerstruktur könnte so aussehen: const isError = { type: "error" }. In den when-Klauseln wird es als when ({ ...isError, code: 404 }) oder when (isError) verwendet. Das Pattern Matching Proposal erlaubt damit eine Komposition von Mustern auf derselben Ebene wie die Komposition von Funktionen – ein Paradigma, das gerade in TypeScript-Projekten mit komplexen Union-Typen erhebliche Wartbarkeitsgewinne bringt.

6. Typ-Muster: instanceof und typeof im Musterabgleich

Das Pattern Matching Proposal unterstützt Typ-Prüfungen direkt im Muster. Mit instanceof Error als Muster passt die Klausel auf alle Instanzen der Error-Klasse und ihrer Unterklassen. Mit typeof "string" passt sie auf alle Strings. Diese Typ-Muster können mit strukturellen Mustern kombiniert werden: instanceof TypeError { message } passt auf ein TypeError-Objekt und bindet gleichzeitig die message-Eigenschaft. Das macht Fehlerbehandlung und Typ-Dispatch erheblich lesbarer als eine Kette aus if (err instanceof TypeError)-Blöcken.

In TypeScript-Projekten interagiert Pattern Matching mit dem Discriminated-Union-Muster besonders gut. Ein Union-Typ type Shape = Circle | Rectangle | Triangle kann in einem einzigen match-Ausdruck vollständig abgedeckt werden, wobei TypeScript die Exhaustivität prüft und für jeden Zweig die korrekte Typ-Narrowing-Information liefert. Das ersetzt das verbreitete Muster aus switch (shape.kind) mit String-Literalen durch einen typsicheren, strukturellen Abgleich.

// Type patterns: instanceof and typeof in match clauses
function handleError(err) {
  return match (err) {
    when (instanceof TypeError { message })
      => `Type error: ${message}`;
    when (instanceof RangeError { message })
      => `Range error: ${message}`;
    when (instanceof Error { message, stack })
      => `Generic error: ${message}`;
    when (typeof "string")
      => `String error: ${err}`;
    when (_)
      => `Unknown error: ${String(err)}`;
  };
}

// Discriminated union pattern (TypeScript)
// type Action =
//   | { type: "increment"; amount: number }
//   | { type: "decrement"; amount: number }
//   | { type: "reset" }

function reducer(state, action) {
  return match (action) {
    when ({ type: "increment", amount }) => state + amount;
    when ({ type: "decrement", amount }) => state - amount;
    when ({ type: "reset" })             => 0;
    // TypeScript knows all cases are covered — no default needed
  };
}

7. Exhaustivität und Default-Klausel

Ein wesentlicher Vorteil von Pattern Matching gegenüber switch/case ist das explizite Fehlerverhalten bei fehlenden Fällen. Wenn kein Muster passt und keine Default-Klausel (when (_)) vorhanden ist, wirft der match-Ausdruck einen MatchError mit einer hilfreichen Fehlermeldung. Das ist das Gegenteil des stillen undefined, das switch ohne default zurückgibt. In Produktionsanwendungen ist ein expliziter Fehler bei unerwartetem Input immer besser als ein stilles Fehlschlagen, das erst Stunden später durch Folgewirkungen auffällt.

In TypeScript interagiert die Exhaustivität von Pattern Matching mit dem Typsystem: Wenn alle Fälle eines Union-Typs abgedeckt sind, erkennt der Compiler, dass der when (_)-Default-Fall unerreichbar ist, und warnt bei aktiviertem noUnusedLocals. Wenn ein neuer Fall zum Union-Typ hinzugefügt wird und der match-Ausdruck keinen Default hat, erzeugt der Compiler einen Fehler – dasselbe Verhalten, das in Rust und Haskell seit Jahrzehnten ein wesentlicher Beitrag zur Korrektheit von Programmen ist.

9. Jetzt nutzen: Babel-Plugin und Polyfill-Strategie

Das Pattern Matching Proposal ist noch kein Teil des ECMAScript-Standards – es befindet sich in Stage 2. Für Produktionsprojekte steht ein Babel-Plugin bereit, das die match-Syntax in kompatibles ES2022-JavaScript transformiert. Das Plugin @babel/plugin-proposal-pattern-matching (oder entsprechende Community-Varianten) ermöglicht bereits heute den Einsatz von Pattern Matching in React-, Node.js- und TypeScript-Projekten. Der Output-Code ist vollständig kompatibel mit allen modernen JavaScript-Engines.

Alternativ bietet die Bibliothek ts-pattern eine vollständige Pattern Matching-Implementierung für TypeScript als Bibliothek an – ohne Babel, ohne Transpiler-Plugin, nur über normale Funktionsaufrufe. Sie unterstützt strukturelle Muster, Guards, Exhaustivitätsprüfung und Typ-Narrowing und ist ein hervorragender Weg, Pattern Matching heute produktiv einzusetzen, auch wenn der native match-Ausdruck noch nicht in der Sprache angekommen ist. Für neue Projekte empfiehlt sich ts-pattern als Brücke bis zur nativen Unterstützung.

// ts-pattern library — Pattern Matching available today in TypeScript
import { match, P } from "ts-pattern";

type ApiResponse =
  | { status: "success"; data: unknown }
  | { status: "error";   code: number; message: string }
  | { status: "loading" };

function handleResponse(response: ApiResponse): string {
  return match(response)
    // Structural pattern with variable binding
    .with({ status: "success", data: P.select() },
          (data) => `Data: ${JSON.stringify(data)}`)

    // Guard: only match if code is 4xx
    .with({ status: "error", code: P.number.between(400, 499), message: P.select() },
          (msg) => `Client error: ${msg}`)

    .with({ status: "error", code: 500 },
          () => "Server error")

    .with({ status: "loading" },
          () => "Loading…")

    // exhaustive() throws if a case is not covered — compile-time AND runtime safety
    .exhaustive();
}

10. Zusammenfassung

Das JavaScript Pattern Matching Proposal bringt mit dem match-Ausdruck eine fundamentale Verbesserung der Kontrollfluss-Ausdruckskraft in JavaScript. Als echter Ausdruck kann match direkt einer Variable zugewiesen oder als Return-Wert verwendet werden. Strukturelle Muster prüfen Objekt-Form, Array-Länge und Typ-Instanz gleichzeitig, ohne verschachtelte if-Ketten. Guards ergänzen strukturelle Muster um boolesche Zusatzbedingungen. Matchlets erlauben die Wiederverwendung von Teilmustern. Und der MatchError macht nicht-exhaustive Abdeckung sofort sichtbar.

Wer heute schon Pattern Matching in JavaScript nutzen will, hat zwei Wege: das Babel-Plugin für nativen match-Syntax oder die Bibliothek ts-pattern für typsichere Implementierung ohne Transpiler. Beide Ansätze sind produktionstauglich und bereiten den Codebase optimal auf den Tag vor, an dem match nativ in allen Engines unterstützt wird.

11. FAQ: JavaScript Pattern Matching Proposal