Nullish Koaleszenzoperator (??)

Der nullish Koaleszenzoperator kann als Sonderfall des logischen ODER-Operators (||) angesehen werden. Letzterer gibt den rechten Operand zurück, wenn der linke Operand einen falsy Wert hat, nicht nur null oder undefined. Mit anderen Worten, wenn Sie || verwenden, um einem anderen Variable foo einen Standardwert zuzuweisen, könnten Sie unerwartete Verhaltensweisen erleben, wenn Sie einige falsy Werte als nutzbar betrachten (z.B. '' oder 0). Siehe unten für mehr Beispiele.

Der nullish Koaleszenzoperator hat die fünfthöchste Operatorpriorität, direkt niedriger als || und direkt höher als der bedingte (ternäre) Operator.

Es ist nicht möglich, sowohl die UND-Operatoren (&&) als auch die ODER-Operatoren (||) direkt mit ?? zu kombinieren. In solchen Fällen wird ein Syntaxfehler ausgelöst.

null || undefined ?? "foo"; // raises a SyntaxError
true && undefined ?? "foo"; // raises a SyntaxError

Stattdessen geben Sie Klammern an, um die Priorität explizit zu kennzeichnen:

(null || undefined) ?? "foo"; // returns "foo"

In diesem Beispiel werden wir Standardwerte bereitstellen, aber andere Werte als null oder undefined behalten.

const nullValue = null;
const emptyText = ""; // falsy
const someNumber = 42;

const valA = nullValue ?? "default for A";
const valB = emptyText ?? "default for B";
const valC = someNumber ?? 0;

console.log(valA); // "default for A"
console.log(valB); // "" (as the empty string is not null or undefined)
console.log(valC); // 42

Früher, wenn man einem Variable einen Standardwert zuweisen wollte, war es üblich, den logischen ODER-Operator (||) zu verwenden:

let foo;

// foo is never assigned any value so it is still undefined
const someDummyText = foo || "Hello!";

Da || jedoch ein boolescher logischer Operator ist, wurde der linke Operand für die Auswertung zu einem Booleschen Wert gezwungen und jeder falsy Wert (einschließlich 0, '', NaN, false, etc.) wurde nicht zurückgegeben. Dieses Verhalten kann unerwartete Folgen haben, wenn Sie 0, '' oder NaN als gültige Werte betrachten.

const count = 0;
const text = "";

const qty = count || 42;
const message = text || "hi!";
console.log(qty); // 42 and not 0
console.log(message); // "hi!" and not ""

Der nullish Koaleszenzoperator vermeidet diese Falle, indem er nur den zweiten Operand zurückgibt, wenn der erste entweder null oder undefined ist (aber keine anderen falsy Werte):

const myText = ""; // An empty string (which is also a falsy value)

const notFalsyText = myText || "Hello world";
console.log(notFalsyText); // Hello world

const preservingFalsy = myText ?? "Hi neighborhood";
console.log(preservingFalsy); // '' (as myText is neither undefined nor null)

Wie die logischen 'ODER'- und 'UND'-Operatoren wird der rechte Ausdruck nicht ausgewertet, wenn der linke Operand weder null noch undefined ist.

function a() {
  console.log("a was called");
  return undefined;
}
function b() {
  console.log("b was called");
  return false;
}
function c() {
  console.log("c was called");
  return "foo";
}

console.log(a() ?? c());
// Logs "a was called" then "c was called" and then "foo"
// as a() returned undefined so both expressions are evaluated

console.log(b() ?? c());
// Logs "b was called" then "false"
// as b() returned false (and not null or undefined), the right
// hand side expression was not evaluated

Der nullish Koaleszenzoperator behandelt undefined und null als spezifische Werte. Das tut auch der optionale Verkettungsoperator (?.), der nützlich ist, um auf eine Eigenschaft eines Objekts zuzugreifen, das möglicherweise null oder undefined ist. Indem man sie kombiniert, kann man sicher auf eine Eigenschaft eines Objektes zugreifen, das möglicherweise nullish ist und einen Standardwert bereitstellen, falls dies der Fall ist.

const foo = { someFooProp: "hi" };

console.log(foo.someFooProp?.toUpperCase() ?? "not available"); // "HI"
console.log(foo.someBarProp?.toUpperCase() ?? "not available"); // "not available"

• Nullish-Zuweisung (??=)
• Optionale Verkettung (?.)
• Logisches ODER (||)
• Standardparameter