JavaScript Nullish-Coalescing-Operator: Standardwertzuweisung vs. Umgang mit Falsy-Werten

JavaScript-Entwickler müssen oft Standardwerte für Variablen zuweisen, wenn der ursprüngliche Wert fehlt oder ungültig ist. Traditionell wurde hierfür der logische ODER-Operator (||) verwendet. Der in ECMAScript 2020 eingeführte Nullish-Coalescing-Operator (??) bietet jedoch eine präzisere und zuverlässigere Lösung, insbesondere im Umgang mit Falsy-Werten. Dieser umfassende Leitfaden untersucht die Nuancen des Nullish-Coalescing, vergleicht ihn mit dem logischen ODER-Operator und zeigt seine Anwendungen in verschiedenen Szenarien.

Den Nullish-Coalescing-Operator (??) verstehen

Der Nullish-Coalescing-Operator (??) gibt seinen rechten Operanden zurück, wenn sein linker Operand null oder undefined ist. Andernfalls gibt er seinen linken Operanden zurück. Einfacher ausgedrückt: Er liefert nur dann einen Standardwert, wenn die Variable explizit null oder undefined ist.

Syntax:

leftOperand ?? rightOperand

Beispiel:

            const name = null ?? "Guest";
console.log(name); // Ausgabe: "Guest"

const age = undefined ?? 25;
console.log(age); // Ausgabe: 25

const score = 0 ?? 100;
console.log(score); // Ausgabe: 0

            

              
                Copy
              
            
          

Unterschied zwischen Nullish-Coalescing (??) und dem logischen ODER (||)

Der logische ODER-Operator (||) bietet ebenfalls eine Möglichkeit, Standardwerte zuzuweisen. Er behandelt jedoch jeden Falsy-Wert (false, 0, '', NaN, null, undefined) als äquivalent zu null oder undefined, was zu unerwartetem Verhalten führen kann.

Beispiel für logisches ODER:

            const quantity = 0 || 10;
console.log(quantity); // Ausgabe: 10 (unerwartet, da 0 ein Falsy-Wert ist)

const message = '' || "No message";
console.log(message); // Ausgabe: "No message" (unerwartet, da '' ein Falsy-Wert ist)

            

              
                Copy
              
            
          

Beispiel für Nullish-Coalescing:

            const quantity = 0 ?? 10;
console.log(quantity); // Ausgabe: 0 (korrekt, da 0 nicht null oder undefined ist)

const message = '' ?? "No message";
console.log(message); // Ausgabe: "" (korrekt, da '' nicht null oder undefined ist)

            

              
                Copy
              
            
          

Wie Sie sehen, wird der Nullish-Coalescing-Operator nur dann ausgelöst, wenn die linke Seite explizit null oder undefined ist, wodurch Falsy-Werte wie 0 und '' erhalten bleiben.

Anwendungsfälle für Nullish-Coalescing

Der Nullish-Coalescing-Operator ist besonders nützlich in Szenarien, in denen zwischen einem fehlenden Wert (null oder undefined) und einem gültigen Falsy-Wert unterschieden werden muss.

1. Handhabung von Konfigurationsoptionen

Bei der Arbeit mit Konfigurationsoptionen möchten Sie möglicherweise Standardwerte für Einstellungen bereitstellen, die nicht explizit definiert wurden. Die Verwendung von ?? stellt sicher, dass gültige Falsy-Werte (z. B. 0 für einen Timeout-Wert) nicht versehentlich durch den Standardwert ersetzt werden.

            const config = {
  timeout: 0,
  maxRetries: null,
  apiEndpoint: undefined
};

const timeout = config.timeout ?? 5000; // Verwende 0, wenn Timeout explizit gesetzt ist, andernfalls 5000 als Standard
const maxRetries = config.maxRetries ?? 3; // Verwende 3, wenn maxRetries null oder undefined ist
const apiEndpoint = config.apiEndpoint ?? "https://example.com/api"; // Verwende den Standard-Endpunkt, wenn apiEndpoint null oder undefined ist

console.log(`Timeout: ${timeout}, Max Retries: ${maxRetries}, API Endpoint: ${apiEndpoint}`);
// Ausgabe: Timeout: 0, Max Retries: 3, API Endpoint: https://example.com/api

            

              
                Copy
              
            
          

2. Arbeiten mit API-Antworten

API-Antworten enthalten oft Felder, die fehlen oder explizit gesetzte Falsy-Werte haben können. Der Nullish-Coalescing-Operator ermöglicht es Ihnen, diese Szenarien elegant zu handhaben und sicherzustellen, dass Sie nur dann Standardwerte bereitstellen, wenn ein Feld wirklich fehlt.

Beispiel: Eine vereinfachte API-Antwort, die einen Benutzer darstellt:

            const user = {
  name: "Alice",
  age: 30,
  countryCode: null,
  acceptedTerms: false,
  profilePictureURL: undefined
};

const displayName = user.name ?? "Unknown User";
const userAge = user.age ?? "Age not available";
const country = user.countryCode ?? "US"; // Standardmäßig 'US', wenn null/undefined
const hasAcceptedTerms = user.acceptedTerms ?? true; // Standardmäßig 'true', wenn null/undefined
const profilePic = user.profilePictureURL ?? "/default-profile.png"; // Standardbild, wenn null/undefined

console.log(`Name: ${displayName}`); // Ausgabe: Name: Alice
console.log(`Age: ${userAge}`); // Ausgabe: Age: 30
console.log(`Country: ${country}`); // Ausgabe: Country: US
console.log(`Accepted Terms: ${hasAcceptedTerms}`); // Ausgabe: Accepted Terms: false
console.log(`Profile Picture: ${profilePic}`); //Ausgabe: Profile Picture: /default-profile.png

            

              
                Copy
              
            
          

In diesem Beispiel verwenden wir standardmäßig "US" nur dann, wenn countryCode explizit null oder undefined ist. Hätte die API countryCode: "" zurückgegeben, wäre der leere String beibehalten worden, was den tatsächlichen (wenn auch möglicherweise fehlenden) Ländercode des Benutzers widerspiegelt.

3. Bereitstellen von Fallback-Werten in Funktionen

Beim Schreiben von Funktionen, die optionale Parameter akzeptieren, kann der Nullish-Coalescing-Operator verwendet werden, um Standardwerte für fehlende Argumente bereitzustellen.

            function greet(name, greeting) {
  const displayName = name ?? "Guest";
  const salutation = greeting ?? "Hello";
  return `${salutation}, ${displayName}!`;
}

console.log(greet("Bob", "Good morning")); // Ausgabe: Good morning, Bob!
console.log(greet(null, undefined)); // Ausgabe: Hello, Guest!
console.log(greet("", "")); // Ausgabe: , !
console.log(greet("", null)); // Ausgabe: Hello, !

            

              
                Copy
              
            
          

Dieser Ansatz stellt sicher, dass die Funktion immer einen Wert hat, mit dem sie arbeiten kann, auch wenn der Aufrufer nicht alle Argumente bereitstellt.

4. Internationalisierung und Lokalisierung (i18n/l10n)

Bei der Arbeit mit internationalisierten Anwendungen hat man oft unterschiedliche Übersetzungen für verschiedene Zeichenketten. Der Nullish-Coalescing-Operator kann verwendet werden, um eine Standardübersetzung bereitzustellen, wenn eine spezifische Übersetzung für eine bestimmte Sprache fehlt.

            const translations = {
  en: {
    greeting: "Hello",
    farewell: "Goodbye"
  },
  fr: {
    greeting: "Bonjour"
  }
};

function translate(key, language) {
  return translations[language]?.[key] ?? translations.en[key] ?? `Translation missing for key: ${key}`;
}

console.log(translate("greeting", "fr")); // Ausgabe: Bonjour
console.log(translate("farewell", "fr")); // Ausgabe: Translation missing for key: farewell
console.log(translate("greeting", "de")); // Ausgabe: Hello (fällt auf Englisch zurück)

            

              
                Copy
              
            
          

In diesem Beispiel versuchen wir zuerst, die Übersetzung für die angegebene Sprache und den Schlüssel zu finden. Wenn diese fehlt, greifen wir auf die englische Übersetzung zurück. Wenn selbst die englische Übersetzung fehlt, geben wir eine Meldung zurück, die anzeigt, dass die Übersetzung fehlt.

5. Umgang mit Benutzereingaben in Formularen

Bei der Verarbeitung von Benutzereingaben aus Formularen können Fälle auftreten, in denen bestimmte Felder leer gelassen werden oder leere Zeichenketten enthalten. Die Verwendung des Nullish-Coalescing-Operators in Verbindung mit dem Optional-Chaining-Operator (?.) kann bei der Behandlung von tief verschachtelten Benutzereingaben sehr effektiv sein.

            const formData = {
  user: {
    name: "",
    address: {
      city: null,
      country: undefined
    }
  }
};

const userName = formData.user.name || "No Name Provided";
const safeUserName = formData?.user?.name ?? "No Name Provided";
const userCity = formData?.user?.address?.city ?? "City Unknown";
const userCountry = formData?.user?.address?.country ?? "Country Unknown";

console.log(userName); // No Name Provided (weil leerer String ein Falsy-Wert ist)
console.log(safeUserName); // "" (weil safeUserName explizit auf null oder undefined prüft)
console.log(userCity); // City Unknown
console.log(userCountry); // Country Unknown

            

              
                Copy
              
            
          

Operator-Rangfolge und Kombination mit anderen Operatoren

Der Nullish-Coalescing-Operator hat eine relativ niedrige Operator-Rangfolge. Das bedeutet, dass Sie oft Klammern verwenden müssen, um sicherzustellen, dass er korrekt ausgewertet wird, insbesondere in Kombination mit anderen Operatoren wie dem logischen UND (&&) oder dem logischen ODER (||).

Wichtiger Hinweis: Sie können ?? nicht direkt mit && oder || ohne die Verwendung von Klammern kombinieren. Dies dient dazu, Mehrdeutigkeiten in der Reihenfolge der Operationen zu vermeiden.

Korrekte Verwendung:

            const value = (someValue ?? 10) && true;
console.log(value); //Ausgabe: true, wenn someValue nicht null oder undefined ist, andernfalls false

const result = (null ?? 5) + 10; // Ausgabe: 15

            

              
                Copy
              
            
          

Falsche Verwendung (Führt zu einem SyntaxError):

            // const value = someValue ?? 10 && true; // SyntaxError: Unexpected token '&&'

// const result = null ?? 5 + 10; // SyntaxError: Unexpected number

            

              
                Copy
              
            
          

Browser-Kompatibilität

Der Nullish-Coalescing-Operator (??) ist eine relativ neue Ergänzung zu JavaScript. Stellen Sie sicher, dass Ihre Zielbrowser ihn unterstützen. Die meisten modernen Browser unterstützen ihn, aber ältere Browser erfordern möglicherweise eine Transpilierung mit Tools wie Babel.

Um die Browser-Kompatibilität zu überprüfen, können Sie auf Ressourcen wie die MDN Web Docs zurückgreifen.

Best Practices für die Verwendung von Nullish-Coalescing

• Verwenden Sie ihn, wenn Sie zwischen fehlenden Werten (null oder undefined) und gültigen Falsy-Werten unterscheiden müssen.
• Verwenden Sie immer Klammern, wenn Sie ?? mit && oder || kombinieren, um Syntaxfehler zu vermeiden und eine korrekte Auswertung sicherzustellen.
• Achten Sie auf die Browser-Kompatibilität und ziehen Sie bei Bedarf eine Transpilierung in Betracht.
• Dokumentieren Sie die Verwendung von ?? klar, um die Lesbarkeit des Codes zu verbessern.
• Testen Sie Ihren Code gründlich, um sicherzustellen, dass Standardwerte in allen Szenarien korrekt zugewiesen werden.

Fazit

Der Nullish-Coalescing-Operator (??) ist eine leistungsstarke und wertvolle Ergänzung der JavaScript-Sprache. Er bietet eine präzisere und zuverlässigere Möglichkeit, Standardwerte zuzuweisen als der traditionelle logische ODER-Operator (||), insbesondere im Umgang mit Falsy-Werten. Indem Sie seine Nuancen und Best Practices verstehen, können Sie saubereren, robusteren und wartbareren JavaScript-Code schreiben. Erwägen Sie die Einführung von ?? in Ihren Projekten, um die Klarheit und Genauigkeit Ihrer Standardwertzuweisungen zu verbessern. Denken Sie daran, Ihren Code gründlich in verschiedenen Browsern zu testen und eine Transpilierung für ältere Umgebungen in Betracht zu ziehen.

Dieser Leitfaden bot einen umfassenden Überblick. Experimentieren Sie mit ?? in verschiedenen Kontexten, um seine Fähigkeiten und Grenzen vollständig zu erfassen, und verfeinern Sie Ihr Verständnis kontinuierlich durch praktische Anwendung.