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 dort einfügen möchten, wo ein einzelner Ausdruck erforderlich ist. Die häufigste Verwendung dieses Operators besteht darin, mehrere Aktualisierer in einer for-Schleife bereitzustellen. Für ein Idiom, das mehrere Anweisungen an einem Ort erlaubt, der einen einzelnen Ausdruck erfordert, können Sie eine IIFE verwenden.

Da alle Ausdrücke mit Ausnahme des letzten ausgewertet und dann verworfen werden, müssen diese Ausdrücke Nebenwirkungen haben, um nützlich zu sein. Häufige Ausdrücke mit Nebenwirkungen sind Zuweisungen, Funktionsaufrufe und die Operatoren ++ und --. 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 durch Komma verbundenen Ausdruck in einen größeren Ausdruck einfügen möchten, müssen Sie ihn in Klammern setzen.

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

• Elemente in Array-Initialisierungen ([1, 2, 3])
• Eigenschaften in Objektinitialisierungen ({ a: 1, b: 2 })
• Parameter in Funktionsdeklarationen/-expressionen (function f(a, b) { … })
• Argumente in Funktionsaufrufen (f(1, 2))
• Bindungs- 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 };)

In der Tat akzeptieren einige dieser Stellen fast alle Ausdrücke, aber keine durch Komma verbundenen Ausdrücke, da dies mit den syntaktischen Komma-Trennzeichen verwechselt werden könnte. In diesem Fall müssen Sie den durch Komma verbundenen Ausdruck in Klammern setzen. Zum Beispiel handelt es sich bei der folgenden const-Deklaration um zwei Variablendeklarationen, wobei das Komma nicht der Komma-Operator ist:

const a = 1, b = 2;

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

const a = (1, b = 2);

Komm-Operatoren können nicht als nachgestellte Kommata erscheinen.

Wenn a ein zweidimensionales Array mit 10 Elementen auf jeder Seite ist, verwendet der folgende Code den Komma-Operator, um i zu inkrementieren und j gleichzeitig zu dekrementieren, und druckt somit die Werte der Diagonalelemente 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 Kommata die niedrigste Priorität haben — sogar niedriger als Zuweisung — können Kommata verwendet werden, um mehrere Zuweisungsausdrücke zu verbinden. Im folgenden Beispiel wird a auf den Wert von b = 3 gesetzt (was 3 ist). Dann wird der Ausdruck c = 4 ausgewertet und sein Ergebnis wird der 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 angegeben, wird nur das letzte Element zurückgegeben, aber alle anderen werden ebenfalls ausgewertet. Man könnte also folgendermaßen vorgehen:

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 eine einzelne 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 anstelle einer Referenz zurück. Dies führt dazu, dass einige kontextbezogene Informationen wie die this-Bindung verloren gehen. Zum Beispiel gibt ein Property-Zugriff eine Referenz auf die Funktion zurück, die sich auch das Objekt merkt, auf das zugegriffen wird, so dass der Aufruf der Eigenschaft ordnungsgemäß funktioniert. Wenn die Methode aus einem Komma-Ausdruck zurückgegeben wird, wird die Funktion so aufgerufen, als ob sie ein neuer Funktionswert wäre, 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)

Mit dieser Technik können Sie indirektes Eval aufrufen, da direktes Eval erfordert, dass der Funktionsaufruf auf die Referenz der 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