Logisches ODER-Zuweisung (||=)

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2020.

Der logische ODER-Zuweisungsoperator (||=) wertet nur den rechten Operanden aus und weist den linken Operanden zu, wenn der linke Operand falsy ist.

Probieren Sie es aus

const a = { duration: 50, title: "" };

a.duration ||= 10;
console.log(a.duration);
// Expected output: 50

a.title ||= "title is empty.";
console.log(a.title);
// Expected output: "title is empty."

Syntax

js
x ||= y

Beschreibung

Die logische ODER-Zuweisung short-circuits, was bedeutet, dass x ||= y äquivalent zu x || (x = y) ist, mit der Ausnahme, dass der Ausdruck x nur einmal ausgewertet wird.

Es wird keine Zuweisung durchgeführt, wenn die linke Seite nicht falsy ist, aufgrund des Short-Circuiting des logischen ODER-Operators. Zum Beispiel führt das Folgende nicht zu einem Fehler, obwohl x als const deklariert ist:

js
const x = 1;
x ||= 2;

Auch das Folgende würde den Setter nicht auslösen:

js
const x = {
  get value() {
    return 1;
  },
  set value(v) {
    console.log("Setter called");
  },
};

x.value ||= 2;

Tatsächlich wird y überhaupt nicht ausgewertet, wenn x nicht falsy ist.

js
const x = 1;
x ||= console.log("y evaluated");
// Logs nothing

Beispiele

Standardinhalt setzen

Wenn das Element „lyrics“ leer ist, wird ein Standardwert angezeigt:

js
document.getElementById("lyrics").textContent ||= "No lyrics.";

Hier ist das Short-Circuiting besonders vorteilhaft, da das Element nicht unnötig aktualisiert wird und keine unerwünschten Nebenwirkungen wie zusätzliche Parsing- oder Rendering-Arbeiten oder Verlust des Fokus verursacht werden.

Hinweis: Achten Sie auf den Wert, der von der API zurückgegeben wird, gegen die Sie testen. Wenn ein leerer String zurückgegeben wird (ein falsy Wert), muss ||= verwendet werden, damit „No lyrics.“ angezeigt wird, anstatt eines leeren Bereichs. Wenn die API jedoch null oder undefined im Falle von leerem Inhalt zurückgibt, sollte ??= verwendet werden.

Spezifikationen

Specification
ECMAScript® 2025 Language Specification
# sec-assignment-operators

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobileserver
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
Deno
Node.js
Logical OR assignment (x ||= y)

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch