Nullish-Zuweisung (??=) — Operator · JavaScript-Referenz

Signatur

x ??= y

Beschreibung

Der Nullish-Zuweisungsoperator ??= (auch: logischer Nullish-Zuweisungsoperator) kombiniert den Nullish-Coalescing-Operator (??) mit einer Zuweisung. Er wertet den rechten Operanden nur dann aus und weist dessen Wert nur dann zu, wenn der linke Operand null oder undefined ist. Bei allen anderen Werten — auch false, 0, "" oder NaN — bleibt der linke Operand unverändert.

Der Ausdruck x ??= y ist semantisch äquivalent zu x ?? (x = y), nicht zu x = x ?? y. Das bedeutet: Ist x nicht nullish, wird die Zuweisung gar nicht ausgeführt, was bei Objekteigenschaften mit Setter-Logik oder bei beobachtbaren Nebenwirkungen relevant ist.

Typische Anwendungsfälle sind das lazy Initialisieren von Variablen, das Setzen von Standardwerten in Konfigurationsobjekten und das Befüllen optionaler Felder, ohne versehentlich falsy-aber-gültige Werte wie 0 oder false zu überschreiben.

Nur bei nullish: null und undefined triggern die Zuweisung.
Nicht bei falsy: 0, "", false, NaN bleiben erhalten.
Short-circuit: Der rechte Ausdruck wird nicht ausgewertet, wenn keine Zuweisung nötig ist.

Parameter

Name	Typ	Default	Beschreibung
$x Pflicht	any	—	Linker Operand — eine gültige Zuweisungs-Zielstelle (Variable, Objekteigenschaft, Array-Element). Ist `x` `null` oder `undefined`, wird ihm der Wert von `y` zugewiesen.
$y Pflicht	any	—	Rechter Operand — der zuzuweisende Ausdruck. Wird nur ausgewertet, wenn `x` nullish ist (Short-Circuit-Auswertung).

Rückgabewert

Typ

any

Beschreibung

Gibt den neuen Wert von x zurück — entweder den ursprünglichen Wert von x (wenn nicht nullish) oder den zugewiesenen Wert von y.

Beispiele

Standardwert setzen, wenn Variable nullish ist

let userName = null;
userName ??= "Gast";
console.log(userName);

let score = 0;
score ??= 100; // 0 ist NICHT nullish → bleibt 0
console.log(score);

Gast 0

Lazy Initialisierung einer Objekteigenschaft

const config = {
  theme: "dark",
  language: null,
  volume: 0,
};

config.language ??= "de";
config.theme    ??= "light"; // "dark" ist nicht nullish → bleibt
config.volume   ??= 50;     // 0 ist nicht nullish → bleibt

console.log(config.language); // "de"
console.log(config.theme);    // "dark"
console.log(config.volume);   // 0

de dark 0

Short-Circuit: rechter Ausdruck wird nicht ausgeführt

let counter = 0;
const getDefault = () => {
  counter++;
  return 42;
};

let a = 5;
a ??= getDefault(); // a ist nicht nullish → getDefault() wird nicht aufgerufen
console.log(a);       // 5
console.log(counter); // 0

let b = undefined;
b ??= getDefault(); // b ist nullish → getDefault() wird aufgerufen
console.log(b);       // 42
console.log(counter); // 1

5 0 42 1

Caching-Muster: Objekt-Property einmalig befüllen

const cache = {};

const getUser = (id) => {
  cache[id] ??= { id, name: `Benutzer ${id}`, loadedAt: Date.now() };
  return cache[id];
};

const u1 = getUser(1);
const u2 = getUser(1); // wird aus Cache zurückgegeben
console.log(u1 === u2); // true — dasselbe Objekt

true

// Wichtig · Fallstricke

Abgrenzung zu ähnlichen Operatoren:

||= (logische ODER-Zuweisung) weist zu, wenn der linke Operand falsy ist — also auch bei 0, "" oder false.
&&= (logische UND-Zuweisung) weist zu, wenn der linke Operand truthy ist.
??= ist die sicherste Wahl, wenn 0, false oder "" gültige und erhaltungswürdige Werte sind.

Browser-Kompatibilität: ??= ist seit ES2021 standardisiert und wird von allen modernen Browsern (Chrome 85+, Firefox 79+, Safari 14+, Edge 85+) sowie Node.js ab Version 15 nativ unterstützt. Für ältere Umgebungen ist ein Babel-Transform erforderlich.

Destrukturierung & komplexe Zuweisungsziele: ??= funktioniert auch mit Objekteigenschaften und Array-Elementen als linkem Operanden, jedoch nicht mit destrukturierten Mustern direkt.

Siehe auch

Nullish-Coalescing-Operator (??) Logische ODER-Zuweisung (||=) Logische UND-Zuweisung (&&=) Optional Chaining (?.) Zuweisungsoperator (=)