Nachgestellte Kommas — Keyword · JavaScript-Referenz

Signatur

[a, b, c,] | { a: 1, b: 2, } | function f(a, b,) {} | f(a, b,)

Beschreibung

Nachgestellte Kommas (auch Schlusskommas oder englisch trailing commas) sind Kommas nach dem letzten Eintrag einer Liste. JavaScript erlaubt sie in Array-Literalen, Objekt-Literalen, Parameterlisten von Funktionen, Funktionsaufrufen, Destrukturierungsmustern (außer nach einem Rest-Element) sowie in benannten import- und export-Listen.

Der Hauptnutzen ist praktisch: Wer eine neue Zeile ans Ende einer mehrzeiligen Liste anhängt, muss die vorherige Zeile nicht mehr ändern. Dadurch werden Diffs in der Versionsverwaltung sauberer – nur die tatsächlich neue Zeile erscheint als Änderung. Außerdem lassen sich Einträge leichter umsortieren, kopieren oder auskommentieren. Werkzeuge wie Prettier (trailingComma: "all") und ESLint (comma-dangle) setzen sie deshalb oft automatisch.

Nachgestellte Kommas haben keine Auswirkung auf die Semantik: Ein Schlusskomma verändert weder die length eines Arrays noch die length einer Funktion oder die Anzahl übergebener Argumente. Anders ist es bei mehreren Kommas am Ende eines Array-Literals: Jedes zusätzliche Komma erzeugt eine Lücke (ein sogenanntes Loch bzw. sparse array).

Nicht erlaubt sind Schlusskommas unter anderem in JSON, nach einem Rest-Parameter oder Rest-Element (...rest,), in einer leeren Parameterliste (f(,)) und nach geklammerten Ausdrücken wie (a, b,) außerhalb von Pfeilfunktionsparametern.

Rückgabewert

Typ

—

Beschreibung

Syntaxmerkmal ohne eigenen Rückgabewert; das Schlusskomma wird vom Parser ignoriert.

Beispiele

Arrays und Objekte mit Schlusskomma

const farben = [
  'rot',
  'grün',
  'blau',
];

const config = {
  host: 'localhost',
  port: 8080,
};

console.log(farben.length);
console.log(Object.keys(config));

3 [ 'host', 'port' ]

Funktionsparameter und Aufrufe (ES2017)

const erstelleBenutzer = (
  name,
  email,
  rolle = 'leser',
) => ({ name, email, rolle });

const user = erstelleBenutzer(
  'Anna',
  'anna@example.com',
);

console.log(erstelleBenutzer.length); // Schlusskomma zählt nicht
console.log(user);

2 { name: 'Anna', email: 'anna@example.com', rolle: 'leser' }

Imports, Exports und Destrukturierung

// utils.js
export {
  formatDatum,
  parseDatum,
};

// app.js
import {
  formatDatum,
  parseDatum,
} from './utils.js';

const [erster, zweiter,] = [10, 20, 30];
const { a, b, } = { a: 1, b: 2 };
console.log(erster, zweiter, a, b);

10 20 1 2

Fallstrick: mehrere Kommas erzeugen Lücken

const arr = [1, 2, 3,,,];
console.log(arr.length);
console.log(1 in arr, 3 in arr);

// In JSON sind Schlusskommas verboten
try {
  JSON.parse('{"a": 1,}');
} catch (err) {
  console.log(err.name);
}

5 true false SyntaxError

// Wichtig · Fallstricke

JSON: JSON.parse() wirft bei Schlusskommas einen SyntaxError. Das gilt auch für package.json und viele Konfigurationsdateien (Ausnahmen: JSONC/JSON5, z. B. tsconfig.json).
Rest-Elemente: function f(...args,) {} und const [a, ...rest,] = arr; sind SyntaxErrors.
Leere Listen: f(,) oder function f(,) {} sind ungültig.
Löcher in Arrays: [1, 2,,] hat die Länge 3, nicht 2 – nur das letzte Komma wird ignoriert. Löcher verhalten sich bei forEach, map usw. anders als undefined-Werte.
Kompatibilität: Schlusskommas in Objekten und Arrays funktionieren überall (sehr alte Versionen des Internet Explorer im Quirks-Modus zählten sie falsch). Kommas in Parameterlisten und Aufrufen erfordern ES2017 (Chrome 58, Firefox 52, Safari 10, Node.js 8); für ältere Umgebungen transpilieren.

Siehe auch

Array Rest-Parameter JSON.parse() Komma-Operator Wörtliches Zeichen: a, b