Türchen 08

Nullish Coalescing – Umgang mit null und undefined

Im JavaScript-Universum sind null und undefined allgegenwärtige Werte, die oft zu unerwartetem Verhalten führen können, wenn sie nicht richtig gehandhabt werden. Mit der Einführung des Nullish Coalescing Operators (??) in ES2020 hat JavaScript ein mächtiges Werkzeug erhalten, um auf elegante Weise mit null und undefined umzugehen. In diesem Artikel werden wir erläutern, wie der Nullish Coalescing Operator funktioniert und wie er sich von anderen Operatoren wie dem logischen Oder || unterscheidet.

Das Problem mit falsy Werten

In JavaScript gelten die folgenden Werte als “falsy”:

• false
• 0
• '' (leerer String)
• null
• undefined
• NaN

Beim Umgang mit Standardwerten wurde traditionell der logische Oder Operator || verwendet:

const value = userInput || 'Standardwert';

Das Problem hierbei ist, dass 0, leere Strings oder false ebenfalls als falsy gelten und daher der Standardwert verwendet wird, auch wenn dies nicht gewünscht ist.

Beispiel:

const userCount = 0;
const totalUsers = userCount || 100;

console.log(totalUsers); // Ausgabe: 100

In diesem Fall möchten wir eigentlich 0 behalten, aber aufgrund des || Operators wird 100 zugewiesen.

Einführung des Nullish Coalescing Operators (??)

Der Nullish Coalescing Operator ?? prüft explizit auf null oder undefined und nicht auf andere falsy Werte. Er gibt den rechten Operand nur zurück, wenn der linke Operand null oder undefined ist.

Syntax:

const value = expression1 ?? expression2;

• Wenn expression1 nicht null oder undefined ist, wird expression1 zurückgegeben.
• Andernfalls wird expression2 zurückgegeben.

Beispiele für die Anwendung

Schauen wir uns hier ein paar einfache Beispiele für die Benutzung des Nullish Coalescing an.

1. Umgang mit null und undefined:

const userName = null;
const displayName = userName ?? 'Gast';

console.log(displayName); // Ausgabe: 'Gast'

Da userName null ist, wird 'Gast' verwendet.

2. Behalten von falsy Werten außer null und undefined:

const userCount = 0;
const totalUsers = userCount ?? 100;

console.log(totalUsers); // Ausgabe: 0

Hier bleibt userCount erhalten, da 0 nicht null oder undefined ist.

3. Vergleich mit dem logischen Oder ||:

const userInput = '';
const data = userInput || 'Standardwert';

console.log(data); // Ausgabe: 'Standardwert'

const dataCorrect = userInput ?? 'Standardwert';

console.log(dataCorrect); // Ausgabe: ''

Mit || wird der leere String überschrieben, während ?? den leeren String beibehält.

Kombination mit Optional Chaining

Der Nullish Coalescing Operator kann effektiv mit dem Optional Chaining Operator ?. kombiniert werden, um sicher auf verschachtelte Eigenschaften zuzugreifen und bei Bedarf Standardwerte zu setzen.

Wie wir bereits am gestrigen Tag 7 gelernt haben, arbeitet der Nullish Coalescing Operator sehr gut mit dem Optional Chaining Operator zusammen.

Beispiel:

const user = {
  profile: {
    email: 'user@example.com'
  }
};

const phoneNumber = user.profile?.phoneNumber ?? 'Keine Telefonnummer verfügbar';

console.log(phoneNumber); // Ausgabe: 'Keine Telefonnummer verfügbar'

Wenn user.profile oder user.profile.phoneNumber undefined ist, wird der Standardwert verwendet.

Einschränkungen und Operator-Präzedenz

Es ist wichtig zu beachten, dass der Nullish Coalescing Operator ?? nicht mit dem logischen UND && oder dem logischen ODER || ohne Klammern kombiniert werden kann, da dies zu Syntaxfehlern führt.

Falsch:

const result = a || b ?? c; // SyntaxError

Richtig:

const result = (a || b) ?? c;

Oder besser, die Operatoren nicht mischen und stattdessen die Logik entsprechend gestalten.

Praktische Anwendungsfälle

Zum Abschluss hier noch ein paar einfache praktische Anwendungsfälle für den Einsatz des Nullish Coalescing Operators.

1. Standardwerte für Funktionsparameter:

function greet(name) {
  const displayName = name ?? 'Gast';
  console.log(`Hallo, ${displayName}!`);
}

greet(); // Ausgabe: 'Hallo, Gast!'
greet('Anna'); // Ausgabe: 'Hallo, Anna!'

2. Konfigurationseinstellungen mit Standardwerten:

const config = {
  timeout: 0,
  theme: null
};

const timeoutValue = config.timeout ?? 5000;
const themeValue = config.theme ?? 'light';

console.log(timeoutValue); // Ausgabe: 0
console.log(themeValue);   // Ausgabe: 'light'

3. Umgang mit API-Daten:

Beim Arbeiten mit Daten aus APIs, die möglicherweise null oder undefined enthalten, kann ?? helfen, sicher Standardwerte zu setzen.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const items = data.items ?? [];
    // Weiterverarbeitung von items
  });

Fazit

Der Nullish Coalescing Operator ?? ist ein wertvolles Werkzeug, um auf einfache Weise mit null und undefined umzugehen, ohne unbeabsichtigt andere falsy Werte zu überschreiben. Er verbessert die Lesbarkeit und Wartbarkeit des Codes, indem er klare Absichten signalisiert und häufige Fallstricke vermeidet.

Setze den Nullish Coalescing Operator in deinem nächsten Projekt ein und vereinfache den Umgang mit null und undefined in deinem JavaScript-Code!