Logical OR Zuweisung (||=)

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

x ||= y

Beschreibung

Die Logical OR Zuweisung short-circuiting, was bedeutet, dass x ||= y gleichbedeutend mit x || (x = y) ist, außer dass der Ausdruck x nur einmal ausgewertet wird.

Es erfolgt keine Zuweisung, wenn die linke Seite nicht falsy ist, aufgrund des Short-Circuitings des Logical OR Operators. Zum Beispiel wirft das folgende keinen Fehler, obwohl x eine const ist:

const x = 1;
x ||= 2;

Ebenso würde das folgende nicht den Setter auslösen:

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

x.value ||= 2;

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

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

Beispiele

Standardinhalt festlegen

Wenn das "lyrics"-Element leer ist, wird ein Standardwert angezeigt:

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 Nebeneffekte wie zusätzlicher Parsing- oder Rendering-Aufwand oder Verlust des Fokus verursacht werden.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Logical OR (||)
• Nullish coalescing operator (??)
• Bitwise OR assignment (|=)
• Truthy
• Falsy