Ein Nullish Coalescing (in JS) Tutorial für normale Menschen

Hallo! Waren Sie schon einmal frustriert, als Sie versuchten, mit Null- oder undefinierten Werten in Ihrem JavaScript-Code umzugehen? Nullish Coalescing ist eine neue Funktion, die dies erheblich vereinfacht. In diesem Beitrag erklären wir Nullish Coalescing.

Das bedeutet einfache Begriffe, unterhaltsame Beispiele und keinen komplizierten Jargon. Am Ende werden Sie in kürzester Zeit sauberen, prägnanten JS-Code schreiben.

Was genau ist Nullish Coalescing? Im Grunde ist es eine kurze, einfache Möglichkeit, einen Standardwert bereitzustellen, wenn etwas null oder undefiniert ist. Anstatt chaotisch verschachtelte Ternärdateien oder logische ODER-Anweisungen zu verwenden, können Sie den doppelten Fragezeichenoperator (??) verwenden, um einen Standardwert zusammenzuführen.

Klingt verwirrend? Keine Sorge, wir zeigen Ihnen anhand einiger leicht verständlicher Beispiele, wie es funktioniert. Schnall dich an, das wird eine lustige Fahrt!

Was genau ist der Nullish-Coalescing-Operator?

Sind Sie schon einmal beim Umgang mit Nullwerten in JavaScript steckengeblieben? Ich weiß, dass ich es habe. Nun, mein Freund, lass mich dir den nullischen Koaleszenzoperator (??) vorstellen. Dieser kleine Kerl wird Ihr Leben so viel einfacher machen.

Was genau ist der nullische Koaleszenzoperator? Im Grunde handelt es sich dabei um eine Abkürzung zur Bereitstellung eines Standardwerts, wenn etwas null oder undefiniert sein könnte. Anstatt zu schreiben:

 let name = obj.name || 'default name';

Sie können jetzt einfach schreiben:

 let name = obj.name ?? 'default name';

Der ?? Der Operator gibt die linke Seite zurück, wenn sie nicht null ist (d. h. null oder undefiniert), andernfalls gibt er die rechte Seite zurück. Wenn also im obigen Beispiel obj.name nicht null oder undefiniert ist, wird name auf obj.name gesetzt. Wenn obj.name jedoch null oder undefiniert ist, ist der Name „Standardname“.

Ziemlich praktisch, oder? Einige andere Beispiele:

 let age = ageInput ?? 25; // Sets age to ageInput if not nullish, otherwise 25 let email = user.email ?? 'no email provided'; let hobbies = obj.hobbies ?? []; // Sets hobbies to obj.hobbies if not nullish, otherwise an empty array

Ich hoffe, dass dies dazu beiträgt, einen Teil Ihrer bedingten Logik in JavaScript zu vereinfachen.

Ein Beispiel aus der Praxis, mit dem wir uns alle identifizieren können

Sind Sie schon einmal losgegangen, um etwas zu bezahlen, und haben dann festgestellt, dass Ihnen ein paar Dollar fehlen? Das haben wir alle schon durchgemacht. Nullish Coalescing ist so, als würde man ein paar zusätzliche Dollar in die Tasche stecken, damit man sich tatsächlich leisten kann, was man kaufen möchte.

Nehmen wir an, Sie gehen in Ihr Lieblingscafé, um Ihr übliches Morgengetränk zu trinken. Sie gehen mit 3 $ in der Hand zur Theke und sind bereit zu bestellen. Aber wenn der Barista Ihnen Ihren Gesamtbetrag mitteilt, beläuft sich dieser auf 3,50 $ nach Steuern.

Nullish Coalescing ist, als würde man sich plötzlich daran erinnern, dass man noch einen Dollar in der Tasche hat, sodass man immer noch seinen Kaffee bekommen kann. Puh!

In JavaScript ist Nullish Coalescing eine Möglichkeit, einen Standardwert bereitzustellen, falls etwas zu Null oder undefiniert aufgelöst wird. Angenommen, Sie haben eine Funktion, die möglicherweise einen Wert zurückgibt oder auch nicht:

 function getCoffeePrice() { // Returns $3.50 or undefined } let price = getCoffeePrice() ?? '$3.50';

Wenn hier getCoffeePrice() undefiniert zurückgibt, beträgt price dank des ?? standardmäßig '$3.50' Nullish-Koaleszenzoperator. So haben Sie in jedem Fall garantiert einen Preis für Ihren Kaffee.

Durch die Nullish-Koaleszierung wird Ihr Code widerstandsfähiger, indem Fallback-Standardwerte bereitgestellt werden, wenn Variablen null oder undefiniert sind. So wie Sie im Café den zusätzlichen Dollar in Ihrer Tasche finden, stellen Sie sicher, dass Sie alles haben, was Sie für den Abschluss der Transaktion benötigen. Ziemlich praktisch, oder?

Jetzt können Sie sich darauf verlassen, dass Sie Nullish Coalescing wie ein Profi verstehen. Viel Spaß beim Programmieren und guten Kaffee!

Verwendung von Nullish Coalescing in JavaScript

Der NULL-Koaleszenzoperator (??) gibt seinen linken Operanden zurück, wenn er nicht NULL ist. andernfalls gibt es seinen rechten Operanden zurück.

Verwirrt? Lassen Sie uns das aufschlüsseln. Ein „Nullwert“ ist entweder null oder undefiniert. Also das ?? Der Operator prüft, ob der linke Wert null ist, und gibt in diesem Fall stattdessen den rechten Wert zurück.

Zum Beispiel:

 const name = bob ?? 'anonymous';

Dadurch wird „bob“ der Wert „name“ zugewiesen, sofern „bob“ definiert ist. Wenn bob undefiniert oder null ist, wird stattdessen die Zeichenfolge „anonymous“ zugewiesen.

Warum ist das nützlich?

Ohne das ?? Operator, Sie müssten Folgendes tun:

 const name = bob !== null && bob !== undefined ? bob : 'anonymous';

Der ?? Der Operator gibt uns eine kürzere, sauberere Syntax, um im Wesentlichen dasselbe zu tun.

Es kann überall in JavaScript verwendet werden – in Variablen , Funktionsargumenten , Objekteigenschaften usw. Überall dort, wo Sie normalerweise || verwenden würden (oder)-Operator für Standardwerte können Sie jetzt ?? für einen „nulllichen“ Standardwert.

Ein paar Beispiele:

 const foo = null ?? 'default string'; // foo is 'default string' const bar = 0 ?? 42; // bar is 0 const qux = 0 || 42; // qux is 42 - || returns first truthy value function doSomething(x = 0) { x = x ?? 10; // If x is nullish, set default of 10 console.log(x); } doSomething(null); // Prints 10 doSomething(5); // Prints 5

Ich hoffe, das hilft, den Nullish-Coalescing-Operator zu erklären!

Warum Nullish Coalescing besser ist als OR (||)

Der OR-Operator (||) gibt den ersten wahren Wert zurück.

Der OR-Operator (||) funktioniert, indem er den ersten wahrheitsgemäßen Wert zurückgibt, auf den er trifft. Wenn beide Werte falsch sind, wird der letzte Wert zurückgegeben. Zum Beispiel:

 let name = null; let user = name || 'John'; // user is 'John'

Hier ist name null (falsch), sodass user den zweiten Wert „John“ erhält.

Der Nullish Coalescing Operator (??) ist intelligenter.

Der Nullish Coalescing Operator (??) wurde in ES2020 eingeführt und ist etwas intelligenter als OR (||). Es wird der erste definierte Wert zurückgegeben (nicht null/undefiniert). Wenn der erste Wert also eine leere Zeichenfolge, 0 oder falsch ist, wird dieser Wert zurückgegeben. Zum Beispiel:

 let name = ''; let user = name ?? 'John'; // user is ''

Hier ist name eine leere Zeichenfolge, sodass user name (den ersten definierten Wert) erhält.

Der Nullish Coalescing Operator ermöglicht es uns, Standardwerte auf sauberere Weise bereitzustellen. Wir können Standardwerte für Null-/undefinierte Werte festlegen, ohne uns Gedanken über falsche Werte wie 0, leere Zeichenfolgen, falsch usw. machen zu müssen.

Angenommen, wir haben eine Funktion, die das Alter eines Benutzers zurückgibt, aber manchmal ist das Alter null:

 function getAge() { return age; // could be null } let userAge = getAge() || 30; // Uses OR, not ideal

Wenn age hier 0, '' oder falsch ist, wäre userAge fälschlicherweise 30.

Die Verwendung des Nullish Coalescing Operators behebt dieses Problem:

 let userAge = getAge() ?? 30; // Uses ??

Jetzt beträgt userAge nur dann 30, wenn age null oder undefiniert ist. Jeder andere falsche Wert wie 0 wird verwendet.

Zusammenfassend lässt sich sagen, dass Sie den Nullish Coalescing Operator (??) anstelle von OR (||) verwenden möchten, wenn Sie einen Standardwert für null/undefiniert bereitstellen möchten, jedoch nicht für falsche Werte wie 0, leere Zeichenfolgen oder false.

Ihr Code wird sauberer und weniger anfällig für Fehler!

Häufige Fragen zu Nullish Coalescing

Sie haben also von diesem schicken neuen Nullish Coalescing-Operator (??) in JavaScript gehört und haben einige Fragen. Keine Sorge, ich bin für Sie da!

Mit welchen Datentypen funktioniert Nullish Coalescing?

• Nullish Coalescing funktioniert mit jedem Datentyp in JavaScript, einschließlich:
• Zahlen: 0 ?? 1 // Gibt 1 zurück
• Zeichenfolgen: '' ?? 'Hallo' // Gibt 'Hallo' zurück
• Boolesche Werte: falsch ?? true // Gibt true zurück
• Objekte: {} ?? {name: 'John'} // Gibt {name: 'John'} zurück
• Arrays: [] ?? [1, 2, 3] // Gibt [1, 2, 3] zurück
• Und mehr!

Was ist der Unterschied zwischen || (Oder und ?? (Nullish Coalescing) Operatoren?

Das || Der (OR)-Operator gibt den rechten Operanden zurück, wenn der linke Operand falsch ist (falsch, 0, leere Zeichenfolge, null, undefiniert, NaN).

Der ?? Der Operator (Nullish Coalescing) gibt den rechten Operanden nur zurück, wenn der linke Operand null oder undefiniert ist.

Der entscheidende Unterschied ist also, dass ?? betrachtet 0 und leere Zeichenfolgen als gültige Werte, während || nicht.

Wann sollte ich verwenden? Über ||?

Verwenden ?? wenn Sie einen Standardwert für null oder undefiniert angeben möchten, 0 und leere Zeichenfolgen jedoch als gültige Werte betrachten.

Verwenden Sie || wenn Sie einen Fallback für jeden „falschen“ Wert bereitstellen möchten.

Ich hoffe, dies hilft dabei, einige Ihrer brennenden Fragen zum Nullish Coalescing-Operator zu klären! Lassen Sie mich wissen, wenn Sie weitere Fragen haben.

Abschluss

Jetzt wissen Sie alles über Nullish Coalescing und wie es in JavaScript funktioniert. Ziemlich einfach, oder? Dieser kleine Operator kann Ihnen Zeit sparen und Ihren Code sauberer machen, indem er Standardwerte auf prägnante Weise bereitstellt.

Also machen Sie sich auf den Weg und verschmelzen Sie nach Herzenslust mit null Werten! Sie sind auf dem besten Weg, moderne JavaScript-Funktionen zu beherrschen.

Viel Spaß beim Codieren!