JavaScript Nullish Coalescing: Ein umfassender Leitfaden zur Zuweisung von Standardwerten

In JavaScript ist die Zuweisung von Standardwerten eine häufige Aufgabe. Traditionell haben Entwickler dafür den OR-Operator (||) verwendet. Der Nullish Coalescing Operator (??), der in ECMAScript 2020 eingeführt wurde, bietet jedoch eine präzisere und zuverlässigere Möglichkeit, Standardwertzuweisungen zu handhaben, insbesondere beim Umgang mit null- oder undefined-Werten. Dieser Leitfaden bietet einen tiefen Einblick in den Nullish Coalescing Operator und untersucht seine Syntax, sein Verhalten, seine Unterschiede zum OR-Operator und seine praktischen Anwendungsfälle.

Was ist Nullish Coalescing?

Der Nullish Coalescing Operator (??) ist ein logischer Operator, der seinen rechten Operanden zurückgibt, wenn sein linker Operand null oder undefined ist. Andernfalls gibt er seinen linken Operanden zurück. Einfacher ausgedrückt: Er stellt einen Standardwert nur dann bereit, wenn eine Variable strikt null oder undefined ist.

Syntax

Die Syntax für den Nullish Coalescing Operator ist unkompliziert:

leftOperand ?? rightOperand

Hier ist leftOperand die Variable oder der Ausdruck, die Sie auf null oder undefined prüfen möchten, und rightOperand ist der Standardwert, den Sie zuweisen möchten, wenn leftOperand tatsächlich null oder undefined ist.

Beispiel

Betrachten Sie das folgende Beispiel:

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

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

const city = "London" ?? "Unknown";
console.log(city); // Ausgabe: London

In diesem Beispiel wird username der Standardwert "Guest" zugewiesen, da er anfänglich null ist. Ebenso wird age 25 zugewiesen, da er als undefined beginnt. city behält jedoch seinen ursprünglichen Wert "London", da er weder null noch undefined ist.

Nullish vs. Falsy Werte

Es ist wichtig, den Unterschied zwischen nullish- und falsy-Werten in JavaScript zu verstehen. Ein nullish-Wert ist entweder null oder undefined. Ein falsy-Wert ist ein Wert, der als falsch betrachtet wird, wenn er in einem booleschen Kontext auftritt. Falsy-Werte sind:

• null
• undefined
• 0 (Null)
• NaN (Keine Zahl)
• '' (leerer String)
• false

Der Hauptunterschied besteht darin, dass der Nullish Coalescing Operator nur auf null oder undefined prüft, während der OR-Operator (||) auf jeden falsy-Wert prüft.

Der Unterschied zwischen ?? und ||

Der OR-Operator (||) ist ein logischer OR-Operator, der den rechten Operanden zurückgibt, wenn der linke Operand falsy ist. Obwohl er zum Zuweisen von Standardwerten verwendet werden kann, kann er zu unerwartetem Verhalten führen, wenn er mit Werten wie 0 oder einem leeren String verwendet wird.

Beispiel: Die Tücken von ||

const quantity = 0 || 10; // Wir beabsichtigen einen Standardwert von 10, wenn quantity fehlt
console.log(quantity); // Ausgabe: 10 (Unerwartet!), weil 0 falsy ist

const text = '' || 'Default Text'; //Wir beabsichtigen einen Standardtext, wenn Text fehlt
console.log(text); // Ausgabe: Default Text (Unerwartet!), weil '' falsy ist

Im ersten Beispiel wollten wir nur dann eine Standardmenge von 10 zuweisen, wenn quantity fehlte (null oder undefined). Da 0 jedoch ein falsy-Wert ist, hat der OR-Operator fälschlicherweise den Standardwert zugewiesen. Ebenso führt der leere String dazu, dass der Standardtext angezeigt wird, auch wenn der String vorhanden ist (aber leer ist).

Verwendung von ?? für Präzision

Schreiben wir das vorherige Beispiel mit dem Nullish Coalescing Operator um:

const quantity = 0 ?? 10;
console.log(quantity); // Ausgabe: 0 (Korrekt!)

const text = '' ?? 'Default Text';
console.log(text); // Ausgabe: '' (Korrekt!)

Jetzt ist die Ausgabe wie erwartet. Der Nullish Coalescing Operator prüft nur auf null oder undefined, sodass 0 und '' als gültige Werte behandelt werden und ihre ursprünglichen Werte beibehalten werden.

Anwendungsfälle für Nullish Coalescing

Der Nullish Coalescing Operator ist in verschiedenen Szenarien nützlich, in denen Sie Standardwerte nur dann bereitstellen müssen, wenn eine Variable strikt null oder undefined ist. Hier sind einige gängige Anwendungsfälle:

1. Umgang mit optionalen Funktionsparametern

Wenn Sie eine Funktion mit optionalen Parametern definieren, können Sie den Nullish Coalescing Operator verwenden, um Standardwerte bereitzustellen, wenn die Parameter nicht angegeben werden.

function greet(name, greeting) {
 const userName = name ?? "User";
 const userGreeting = greeting ?? "Hello";
 console.log(`${userGreeting}, ${userName}!`);
}

greet(); // Ausgabe: Hello, User!
greet("Alice"); // Ausgabe: Hello, Alice!
greet("Bob", "Greetings"); // Ausgabe: Greetings, Bob!

2. Festlegen von Standardkonfigurationsoptionen

Wenn Sie mit Konfigurationsobjekten arbeiten, können Sie den Nullish Coalescing Operator verwenden, um sicherzustellen, dass Standardwerte verwendet werden, wenn bestimmte Konfigurationsoptionen nicht angegeben werden.

const config = {
 timeout: 5000,
 retries: 3
};

function fetchData(options) {
 const timeout = options.timeout ?? 10000; // Standard-Timeout von 10 Sekunden
 const retries = options.retries ?? 5; // Standardmäßig 5 Wiederholungsversuche
 console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

fetchData(config); // Ausgabe: Timeout: 5000, Retries: 3
fetchData({}); // Ausgabe: Timeout: 10000, Retries: 5
fetchData({timeout:null, retries: undefined}); // Ausgabe: Timeout: 10000, Retries: 5

3. Zugriff auf verschachtelte Objekteigenschaften

Beim Zugriff auf Eigenschaften verschachtelter Objekte kann der Nullish Coalescing Operator mit optionalem Chaining (?.) kombiniert werden, um Standardwerte bereitzustellen, wenn eine der Zwischeneigenschaften null oder undefined ist.

const user = {
 profile: {
 address: {
 city: "New York"
 }
 }
};

const cityName = user?.profile?.address?.city ?? "Unknown";
console.log(cityName); // Ausgabe: New York

const unknownUser = {};
const unknownCityName = unknownUser?.profile?.address?.city ?? "Unknown";
console.log(unknownCityName); // Ausgabe: Unknown

4. Arbeiten mit APIs und externen Daten

Beim Abrufen von Daten von APIs oder externen Quellen kann der Nullish Coalescing Operator verwendet werden, um Standardwerte bereitzustellen, wenn bestimmte Datenfelder fehlen oder null- oder undefined-Werte haben. Betrachten Sie das Abrufen von Benutzerdaten aus verschiedenen Regionen. Nehmen wir an, einige Regionen enthalten das Feld `country` nicht in ihren Benutzerdaten.

async function getUserData(userId) {
 try {
 const response = await fetch(`https://api.example.com/users/${userId}`);
 const data = await response.json();
 const country = data.country ?? "Unknown Country";
 const timezone = data.timezone ?? "UTC";
 console.log(`User is from: ${country}, Timezone: ${timezone}`);
 } catch (error) {
 console.error("Error fetching user data:", error);
 }
}

// Simulieren verschiedener API-Antworten:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Um dies zu testen, benötigen Sie eine tatsächliche API oder Mock-Fetch.
// Zur Demonstration simulieren wir die Antworten:
global.fetch = async (url) => {
 if (url.includes("123")) {
 return { json: async () => userWithCountry };
 } else if (url.includes("456")) {
 return { json: async () => userWithoutCountry };
 }
 throw new Error("Unexpected URL");
};

getUserData(123); // Ausgabe: User is from: USA, Timezone: EST
getUserData(456); // Ausgabe: User is from: Unknown Country, Timezone: GMT

Operatorrangfolge

Der Nullish Coalescing Operator hat eine relativ niedrige Operatorrangfolge. Er ist niedriger als die OR (||)- und AND (&&)-Operatoren. Wenn Sie den Nullish Coalescing Operator mit anderen logischen Operatoren kombinieren, ist es daher wichtig, Klammern zu verwenden, um die Reihenfolge der Operationen explizit zu definieren. Andernfalls kann es zu Syntaxfehlern oder unerwartetem Verhalten kommen.

Beispiel: Verwendung von Klammern zur Verdeutlichung

// Ohne Klammern (SyntaxError)
// const result = false || null ?? "Default"; // SyntaxError: Unexpected token '??'

// Mit Klammern (Korrekt)
const result = false || (null ?? "Default");
console.log(result); // Ausgabe: Default

const anotherResult = (false || null) ?? "Default";
console.log(anotherResult); // Ausgabe: null

Im ersten Beispiel führt das Fehlen von Klammern zu einem SyntaxError, da die JavaScript-Engine die beabsichtigte Reihenfolge der Operationen nicht bestimmen kann. Durch das Hinzufügen von Klammern weisen wir die Engine explizit an, den Nullish Coalescing Operator zuerst auszuwerten. Das zweite Beispiel ist gültig; die Ausgabe ist jedoch anders, da der `||`-Ausdruck zuerst ausgewertet wird.

Browserkompatibilität

Der Nullish Coalescing Operator (??) ist eine relativ neue Funktion, daher ist es wichtig, die Browserkompatibilität zu berücksichtigen, insbesondere wenn Sie ältere Browser ansprechen. Die meisten modernen Browser unterstützen den Nullish Coalescing Operator, einschließlich:

• Chrome 80+
• Firefox 72+
• Safari 13.1+
• Edge 80+
• Node.js 14+

Wenn Sie ältere Browser unterstützen müssen, können Sie einen Transpiler wie Babel verwenden, um Ihren Code in eine kompatible Version von JavaScript zu konvertieren. Babel transformiert den ??-Operator in äquivalenten JavaScript-Code, der in älteren Umgebungen funktioniert.

Bewährte Methoden

Hier sind einige bewährte Methoden für die effektive Verwendung des Nullish Coalescing Operators:

• Verwenden Sie ?? für Nullish-Prüfungen: Verwenden Sie den Nullish Coalescing Operator (??), wenn Sie speziell einen Standardwert nur dann bereitstellen möchten, wenn eine Variable null oder undefined ist.
• Verwenden Sie Klammern für komplexe Ausdrücke: Wenn Sie den Nullish Coalescing Operator mit anderen logischen Operatoren kombinieren, verwenden Sie Klammern, um die Reihenfolge der Operationen klar zu definieren.
• Berücksichtigen Sie die Browserkompatibilität: Überprüfen Sie die Browserkompatibilität und verwenden Sie gegebenenfalls einen Transpiler, um ältere Browser zu unterstützen.
• Konsistente Verwendung: Verwenden Sie ??, wo dies angebracht ist, für einen besser vorhersagbaren Codierungsstil im gesamten Projekt.
• Mit optionalem Chaining kombinieren: Verwenden Sie ?? in Verbindung mit optionalem Chaining ?., um sicher auf verschachtelte Eigenschaften von Objekten zuzugreifen und ihnen Standardwerte zuzuweisen.

Globale Überlegungen

Berücksichtigen Sie bei der Entwicklung für ein globales Publikum die folgenden Punkte im Zusammenhang mit der Zuweisung von Standardwerten:

• Lokalisierung: Standardwerte müssen möglicherweise basierend auf der Sprache oder Region des Benutzers lokalisiert werden. Zum Beispiel ein Standardsymbol für eine Währung oder ein Datumsformat.
• Kulturelle Normen: Bestimmte Standardwerte müssen möglicherweise basierend auf kulturellen Normen angepasst werden. Beispielsweise muss eine Standardbegrüßungsnachricht in verschiedenen Kulturen möglicherweise unterschiedlich sein.
• Barrierefreiheit: Stellen Sie sicher, dass Standardwerte für Benutzer mit Behinderungen zugänglich und verständlich sind. Stellen Sie klare und beschreibende Beschriftungen für Standardwerte in Benutzeroberflächen bereit.
• Zeitzonen und Daten: Verwenden Sie beim Arbeiten mit Datums- und Uhrzeitangaben die entsprechenden Zeitzonen und Datumsformate, um sicherzustellen, dass Standardwerte für Benutzer in verschiedenen Regionen korrekt angezeigt werden.

Beispiel: Lokalisierung mit Nullish Coalescing

Nehmen wir an, Sie möchten eine Standard-Willkommensnachricht in verschiedenen Sprachen basierend auf dem Gebietsschema des Benutzers anzeigen. Sie können den Nullish Coalescing Operator verwenden, um eine Standardnachricht bereitzustellen, wenn eine lokalisierte Nachricht nicht verfügbar ist.

function getWelcomeMessage(locale) {
 const localizedMessages = {
 en: "Welcome!",
 fr: "Bienvenue !",
 de: "Willkommen!"
 };

 const message = localizedMessages[locale] ?? "Welcome!"; // Standardmäßig Englisch, wenn Gebietsschema nicht gefunden
 return message;
}

console.log(getWelcomeMessage("fr")); // Ausgabe: Bienvenue !
console.log(getWelcomeMessage("es")); // Ausgabe: Welcome! (Standardmäßig Englisch)

Fazit

Der Nullish Coalescing Operator (??) ist eine wertvolle Ergänzung der JavaScript-Sprache. Er bietet eine präzisere und zuverlässigere Möglichkeit, Standardwerte zuzuweisen, als der OR-Operator (||), insbesondere beim Umgang mit Werten wie 0 oder leeren Strings. Indem Sie seine Syntax, sein Verhalten und seine Anwendungsfälle verstehen, können Sie saubereren, wartungsfreundlicheren Code schreiben, der Standardwertzuweisungen genau verarbeitet. Denken Sie daran, Browserkompatibilität, Operatorrangfolge und globale Überlegungen zu berücksichtigen, wenn Sie den Nullish Coalescing Operator in Ihren Projekten verwenden.

Indem Sie die in diesem Leitfaden beschriebenen bewährten Methoden befolgen, können Sie den Nullish Coalescing Operator effektiv nutzen, um die Qualität und Zuverlässigkeit Ihres JavaScript-Codes zu verbessern und ihn robuster und leichter verständlich zu machen. Denken Sie daran, in Ihrem Code immer Klarheit und Wartbarkeit zu priorisieren, und der Nullish Coalescing Operator kann ein leistungsstarkes Werkzeug sein, um diese Ziele zu erreichen.