Komma-Operator (,)

expr1, expr2, expr3, …

Eine oder mehrere Ausdrücke, von denen der letzte als Wert des zusammengesetzten Ausdrucks zurückgegeben wird.

Sie können den Komma-Operator verwenden, wenn Sie mehrere Ausdrücke an einer Stelle einfügen möchten, die einen einzelnen Ausdruck erfordert. Die häufigste Verwendung dieses Operators ist die Bereitstellung mehrerer Aktualisierungen in einer for-Schleife. Für ein Idiom, das mehrere Anweisungen an einer Stelle erlaubt, die einen einzelnen Ausdruck erfordert, können Sie ein IIFE verwenden.

Da alle Ausdrücke außer dem letzten ausgewertet und dann verworfen werden, müssen diese Ausdrücke Nebenwirkungen haben, um nützlich zu sein. Häufige Ausdrücke, die Nebenwirkungen haben, sind Zuweisungen, Funktionsaufrufe und die ++- und ---Operatoren. Andere können ebenfalls Nebenwirkungen haben, wenn sie Getter aufrufen oder Typumwandlungen auslösen.

Der Komma-Operator hat die niedrigste Priorität aller Operatoren. Wenn Sie einen kommagetrennten Ausdruck in einen größeren Ausdruck integrieren möchten, müssen Sie ihn in Klammern setzen.

Der Komma-Operator ist völlig anders als Kommas, die als syntaktische Trennzeichen an anderen Stellen verwendet werden, wie z.B.:

• Elemente in Array-Initialisierungen ([1, 2, 3])
• Eigenschaften in Objektinitialisierungen ({ a: 1, b: 2 })
• Parameter in Funktionsdeklarationen/-ausdrücken (function f(a, b) { … })
• Argumente in Funktionsaufrufen (f(1, 2))
• Binde-Listen in let, const oder var Deklarationen (const a = 1, b = 2;)
• Importlisten in import-Deklarationen (import { a, b } from "c";)
• Exportlisten in export-Deklarationen (export { a, b };)

Tatsächlich akzeptieren, obwohl einige dieser Orte fast alle Ausdrücke akzeptieren, kommagetrennte Ausdrücke nicht, da dies mit syntaktischen Komma-Trennzeichen nicht eindeutig wäre. In diesem Fall müssen Sie den kommagetrennten Ausdruck einklammern. Zum Beispiel ist folgendes eine const-Deklaration, die zwei Variablen deklariert, wobei das Komma nicht der Komma-Operator ist:

const a = 1, b = 2;

Dies unterscheidet sich von folgendem, wo b = 2 ein Zuweisungsausdruck und keine Deklaration ist. Der Wert von a ist 2, der Rückgabewert der Zuweisung, während der Wert von 1 verworfen wird:

const a = (1, b = 2);

Komma-Operatoren können nicht als nachgestellte Kommas erscheinen.

Wenn a ein 2-dimensionales Array mit 10 Elementen auf jeder Seite ist, verwendet der folgende Code den Komma-Operator, um i zu erhöhen und j gleichzeitig zu verringern, und druckt somit die Werte der diagonalen Elemente im Array:

const a = Array.from({ length: 10 }, () =>
  Array.from({ length: 10 }, Math.random),
); // A 10×10 array of random numbers

for (let i = 0, j = 9; i <= 9; i++, j--) {
  console.log(`a[${i}][${j}] = ${a[i][j]}`);
}

Da Kommas die niedrigste Priorität haben – sogar niedriger als Zuweisungen – können Kommas verwendet werden, um mehrere Zuweisungsausdrücke zu verknüpfen. Im folgenden Beispiel wird a auf den Wert von b = 3 gesetzt (welcher 3 ist). Dann wird der Ausdruck c = 4 ausgewertet, und sein Ergebnis wird zum Rückgabewert des gesamten Komma-Ausdrucks.

let a, b, c;

a = b = 3, c = 4; // Returns 4
console.log(a); // 3 (left-most)

let x, y, z;

x = (y = 5, z = 6); // Returns 6
console.log(x); // 6 (right-most)

Ein weiteres Beispiel, das man mit dem Komma-Operator machen könnte, ist die Verarbeitung vor der Rückgabe. Wie gesagt, nur das letzte Element wird zurückgegeben, aber alle anderen werden ebenfalls ausgewertet. Man könnte also folgendes tun:

function myFunc() {
  let x = 0;

  return (x += 1, x); // the same as return ++x;
}

Dies ist besonders nützlich für einzeilige Pfeilfunktionen. Das folgende Beispiel verwendet ein einzelnes map(), um sowohl die Summe eines Arrays als auch die Quadrate seiner Elemente zu erhalten, was sonst zwei Iterationen erfordern würde, eine mit reduce() und eine mit map():

let sum = 0;
const squares = [1, 2, 3, 4, 5].map((x) => ((sum += x), x * x));
console.log(squares); // [1, 4, 9, 16, 25]
console.log(sum); // 15

Der Komma-Operator gibt immer den letzten Ausdruck als Wert und nicht als Referenz zurück. Dies führt dazu, dass einige Kontextinformationen wie die this-Bindung verloren gehen. Zum Beispiel gibt ein Eigenschaftszugriff eine Referenz auf die Funktion zurück, die sich auch das Objekt merkt, auf dem sie aufgerufen wird, sodass der Aufruf der Eigenschaft korrekt funktioniert. Wenn die Methode aus einem Komma-Ausdruck zurückgegeben wird, wird die Funktion so aufgerufen, als wäre sie ein neuer Funktionswert, und this ist undefined.

const obj = {
  value: "obj",
  method() {
    console.log(this.value);
  },
};

obj.method(); // "obj"
(obj.method)(); // "obj" (the grouping operator still returns the reference)
(0, obj.method)(); // undefined (the comma operator returns a new value)

Sie können mit dieser Technik einen indirekten eval betreten, da direktes eval erfordert, dass der Funktionsaufruf auf der Referenz zur eval()-Funktion erfolgt.

globalThis.isDirectEval = false;

{
  const isDirectEval = true;
  console.log(eval("isDirectEval")); // true
  console.log((eval)("isDirectEval")); // true (the grouping operator still returns a reference to `eval`)
  console.log((0, eval)("isDirectEval")); // false (the comma operator returns a new value)
}

• for
• IIFE