Nullish-Coalescing-Operator in JavaScript

Dieser Artikel erklärt den Nullish-Coalescing-Operator in JavaScript.

YouTube Video

Nullish-Coalescing-Operator in JavaScript

In JavaScript prüft der Nullish-Coalescing-Operator (??), ob ein Wert null oder undefined ist, und gibt in diesem Fall einen anderen Standardwert zurück. Er ist dem häufig verwendeten logischen ODER-Operator (||) ähnlich, unterscheidet sich jedoch darin, dass er speziell für null und undefined entwickelt wurde.

Der logische ODER-Operator gibt den rechten Wert zurück, wenn der linke Wert „falsy“ ist, während der Nullish Coalescing Operator den rechten Wert nur dann zurückgibt, wenn der linke Wert null oder undefined ist. Diese Funktion ermöglicht die korrekte Handhabung von Werten wie 0 und leeren Zeichenfolgen ("").

Grundlegende Syntax

1let result = value ?? defaultValue;

• value ist der Wert, der geprüft wird.
• defaultValue ist der Wert, der zurückgegeben wird, wenn value null oder undefined ist.

Beispiele für die Verwendung des Nullish-Coalescing-Operators

Das folgende Beispiel implementiert einen Prozess, um einen Standardwert bei null oder undefined zurückzugeben.

1let name = null;
2let defaultName = "Anonymous";
3
4// If name is null or undefined, 'Anonymous' is returned
5let displayName = name ?? defaultName;
6console.log(displayName); // "Anonymous"

In diesem Code wird, da name null ist, der Wert von defaultName, "Anonymous", zurückgegeben. Wenn name einen anderen Wert als null oder undefined hat, wird dieser Wert zurückgegeben.

Unterschiede zum logischen ODER-Operator

Der Nullish Coalescing Operator ist dem logischen ODER-Operator ähnlich, weist jedoch einen wichtigen Unterschied auf. Der logische ODER-Operator überprüft „falsy“-Werte (false, 0, NaN, "", null, undefined usw.), während der Nullish Coalescing Operator nur auf null und undefined prüft.

Beispiel für den logischen ODER-Operator:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is falsy (0), defaultCount is returned
5let result = count || defaultCount;
6console.log(result); // 10

Beispiel für den Nullish-Coalescing-Operator:

1let count = 0;
2let defaultCount = 10;
3
4// Since count is neither null nor undefined, count is returned as is
5let result = count ?? defaultCount;
6console.log(result); // 0

Auf diese Weise behält der Nullish Coalescing Operator gültige Werte wie 0 und leere Strings ("") und gibt nur dann einen Standardwert zurück, wenn es notwendig ist. Da der logische ODER-Operator diese Werte als „falsy“ behandelt und den Standardwert zurückgibt, ist es wichtig, je nach Anwendungsfall den passenden Operator zu wählen.

Beispiel bei kombinierter Verwendung:

Der Nullish Coalescing Operator kann auch mit anderen logischen Operatoren kombiniert werden, jedoch ist dabei Vorsicht geboten.

1let a = null;
2let b = 0;
3let c = false;
4
5// SyntaxError
6let result = a ?? b || c;

• Zum Beispiel sollten Klammern verwendet werden, um die Reihenfolge der Operationen zu verdeutlichen, wenn er zusammen mit dem logischen ODER-Operator (||) oder dem logischen UND-Operator (&&) verwendet wird.

1let a = null;
2let b = 0;
3let c = false;
4
5let result = (a ?? b) || c;
6console.log(result); // false

• In diesem Beispiel wird a ?? b zuerst ausgewertet, und da a null ist, wird b zurückgegeben. Dann wird b || c ausgewertet, und da b ein falsy-Wert ist, wird schließlich c zurückgegeben.

Fälle, in denen der Nullish Coalescing Operator nützlich ist

Die folgenden Fälle zeigen, wann der Nullish Coalescing Operator nützlich ist.

• Standardwerte für Formulare Dies kann in Szenarien verwendet werden, in denen ein Standardwert für Formulareingabefelder festgelegt wird, wenn der Benutzer nichts eingibt.

1let userAge = null;
2let defaultAge = 18;
3let age = userAge ?? defaultAge;
4console.log(age); // 18

• Verarbeitung von API-Antworten Fallback-Verarbeitung kann durchgeführt werden, wenn der Wert in API-Antworten null oder undefined ist.

1let apiResponse = {
2    title: "New Article",
3    description: null
4};
5
6let title = apiResponse.title ?? "Untitled";
7let description = apiResponse.description ?? "No description available";
8console.log(title);        // "New Article"
9console.log(description);  // "No description available"

Zusammenfassung

Der Nullish Coalescing Operator (??) ist besonders nützlich zur Initialisierung von Daten und beim Umgang mit API-Antworten, da er einen Standardwert zurückgibt, wenn er auf null oder undefined stößt. Insbesondere ist er eine bessere Wahl als der traditionelle logische ODER-Operator (||), wenn Sie „falsy“-Werte wie 0 oder leere Strings korrekt behandeln möchten.

Über den Nullish-Coalescing-Zuweisungsoperator (??=)

Übersicht

In JavaScript wurde der Nullish-Coalescing-Zuweisungsoperator ??= eingeführt, um effizient einen neuen Wert Variablen zuzuweisen, die null oder undefined enthalten. Dieser Operator ist eine praktische Abkürzung, um einer Variablen nur dann einen Wert zuzuweisen, wenn dieser null oder undefined ist.

Grundlegende Verwendung

Der Nullish Coalescing Zuweisungsoperator funktioniert wie folgt:.

• Wenn eine Variable null oder undefined ist, wird der Wert der rechten Seite zugewiesen.
• Wenn die Variable weder null noch undefined ist, wird nichts weiter getan und der aktuelle Wert bleibt erhalten.

Syntax

Die grundlegende Syntax des Nullish Coalescing Zuweisungsoperators ist wie folgt:.

1x ??= y;

• y wird x zugewiesen, wenn x null oder undefined ist.
• Wenn x bereits einen Wert hat (nicht null oder undefined), wird der Wert von x nicht geändert.

Beispiel

Schauen wir uns ein einfaches Beispiel für den Nullish-Koaleszenzzuweisungsoperator an.

1let userName = null;
2let defaultName = "Guest";
3
4// Since userName is null, defaultName is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Guest"

• In diesem Code wird der Wert von defaultName zugewiesen, da userName null ist.

Hier ist ein Beispiel, in dem der Wert weder null noch undefined ist.

1let userName = "Alice";
2let defaultName = "Guest";
3
4// Since userName is "Alice", nothing is assigned
5userName ??= defaultName;
6
7console.log(userName);  // "Alice"

• In diesem Fall wird keine Zuweisung vorgenommen, da "Alice" bereits für userName gesetzt ist.

Vergleich mit anderen Zuweisungsoperatoren

JavaScript verfügt auch über mehrere andere Zuweisungsoperatoren. Insbesondere der Unterschied zum logischen OR-Zuweisungsoperator (||=) ist wichtig.

1let value = 0;
2value ||= 10;  // Assign 10 if value is falsy
3console.log(value);  // 10

Der logische ODER-Zuweisungsoperator weist einen Wert zu, selbst wenn er auf „falsy“-Werte wie false, 0 oder einen leeren String ("") trifft, während der Nullish Coalescing Zuweisungsoperator nur bei null oder undefined aktiv wird.

1let value = 0;
2value ??= 10;
3// Since value is neither null nor undefined,
4// nothing is assigned
5console.log(value);  // 0

Da der Nullish Coalescing Zuweisungsoperator nur bei null oder undefined aktiv wird, ist er sehr nützlich, wenn Sie Werte wie 0 oder false beibehalten möchten.

Anwendungsfälle aus der realen Welt

Ein praktischer Anwendungsfall für den Null-Coalescing-Zuweisungsoperator könnte wie folgt aussehen:.

1. Standardwerte festlegen

   Es ist nützlich, um Standardwerte festzulegen, wenn Benutzereingaben oder API-Antworten null oder undefined sein können.

1let userSettings = {
2    theme: null,
3    notifications: true
4};
5
6// Since theme is null, "light" is assigned
7userSettings.theme ??= "light";
8
9console.log(userSettings.theme);  // "light"

2. Optionale Parameter verarbeiten

   Es kann auch verwendet werden, um Standardaktionen auszuführen, wenn Funktionsargumente nicht angegeben sind.

1function greet(name) {
2    name ??= "Guest";
3    console.log(`Hello, ${name}!`);
4}
5
6greet();  // "Hello, Guest!"
7greet("Alice");  // "Hello, Alice!"

Zusammenfassung

Der Nullish Coalescing Zuweisungsoperator (??=) weist nur dann einen Wert zu, wenn der Wert auf der linken Seite null oder undefined ist, wodurch der Code kompakter wird und unbeabsichtigte Zuweisungen vermieden werden. Insbesondere beim Umgang mit "falsy"-Werten wie 0 oder false kann es geeigneter sein als der traditionelle logische Oder-Operator (||=).

Durch die Verwendung dieses Operators können Sie robusteren und besser lesbaren Code erstellen.

Sie können den obigen Artikel mit Visual Studio Code auf unserem YouTube-Kanal verfolgen. Bitte schauen Sie sich auch den YouTube-Kanal an.

YouTube Video