Null-coalescing-operator in JavaScript

Dit artikel legt de null-coalescing-operator in JavaScript uit.

YouTube Video

Null-coalescing-operator in JavaScript

In JavaScript controleert de null-coalescing-operator (??) of een waarde null of undefined is en retourneert een andere standaardwaarde indien dat het geval is. Het lijkt op de veelgebruikte logische OF-operator (||), maar verschilt doordat het specifiek is voor null en undefined.

De logische OF-operator retourneert de waarde aan de rechterkant als de waarde aan de linkerkant falsy is, terwijl de nullish coalescing-operator de waarde aan de rechterkant retourneert alleen wanneer de waarde aan de linkerkant null of undefined is. Deze functie maakt het mogelijk om waarden zoals 0 en lege strings ("") correct te verwerken.

Basis Syntax

1let result = value ?? defaultValue;

• value is de te controleren waarde.
• defaultValue is de waarde die wordt geretourneerd wanneer value null of undefined is.

Voorbeelden van het gebruik van de null-coalescing-operator

Het volgende voorbeeld implementeert een proces om een standaardwaarde te retourneren in het geval van null of undefined.

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 deze code wordt, aangezien name null is, de waarde van defaultName, "Anonymous", geretourneerd. Als name een andere waarde heeft dan null of undefined, wordt die waarde geretourneerd.

Verschillen met de logische OF-operator

De nullish coalescing-operator lijkt op de logische OF-operator, maar heeft een belangrijk verschil. De logische OF-operator controleert op 'falsy'-waarden (false, 0, NaN, "", null, undefined, enz.), terwijl de nullish coalescing-operator controleert alleen op null en undefined.

Voorbeeld van logische OF-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

Voorbeeld van null-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

Op deze manier behoudt de nullish coalescing-operator geldige waarden zoals 0 en lege strings ("") en retourneert alleen een standaardwaarde indien nodig. Aangezien de logische OF-operator deze waarden als falsy beschouwt en de standaardwaarde retourneert, is het belangrijk om de juiste operator te kiezen afhankelijk van de gebruikssituatie.

Voorbeeld bij gecombineerd gebruik:

De nullish coalescing-operator kan ook worden gecombineerd met andere logische operatoren, maar voorzichtigheid is hierbij geboden.

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

• Bijvoorbeeld, wanneer deze samen met de logische OF-operator (||) of de logische EN-operator (&&) wordt gebruikt, moeten haakjes worden gebruikt om de volgorde van bewerkingen te verduidelijken.

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

• In dit voorbeeld wordt a ?? b eerst geëvalueerd, en aangezien a null is, wordt b geretourneerd. Dan wordt b || c geëvalueerd, en omdat b onwaarachtig is, wordt uiteindelijk c geretourneerd.

Situaties waarin de nullish coalescing-operator nuttig is

De volgende zijn situaties waarin de nullish coalescing-operator nuttig is.

• Standaardwaarden voor Formulieren Dit kan worden gebruikt in scenario's waarin een standaardwaarde wordt ingesteld voor invoervelden van formulieren wanneer de gebruiker niets invult.

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

• API-Responsverwerking Fallback-verwerking kan worden uitgevoerd wanneer de waarde null of undefined is in antwoorden van de API.

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"

Samenvatting

De nullish coalescing-operator (??) is erg handig voor het initialiseren van gegevens en het verwerken van API-reacties, omdat deze een standaardwaarde retourneert bij null of undefined. In het bijzonder is het een betere keuze dan de traditionele logische OF-operator (||) wanneer je falsy-waarden zoals 0 of lege strings correct wilt verwerken.

Over de Nullish Coalescing-Toekenningoperator (??=)

Overzicht

In JavaScript is de Nullish Coalescing-Toekenningoperator ??= geïntroduceerd om efficiënt een nieuwe waarde toe te wijzen aan variabelen die null of undefined bevatten. Deze operator is een handige snelkoppeling om een waarde alleen toe te wijzen aan een variabele als een specifieke waarde null of undefined is.

Basisgebruik

De nullish coalescing-toewijzingsoperator werkt als volgt:.

• Als een variabele null of undefined is, wijst deze de waarde aan de rechterkant toe.
• Als de variabele niet null of undefined is, doet deze niets en behoudt de huidige waarde.

Syntax

De basis syntax van de nullish coalescing-toewijzingsoperator is als volgt:.

1x ??= y;

• y wordt aan x toegewezen als x null of undefined is.
• Als x al een waarde heeft (niet null of undefined), wordt de waarde van x niet gewijzigd.

Voorbeeld

Laten we eens kijken naar een eenvoudig voorbeeld van de nullish coalescing-toewijzingsoperator.

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

• In deze code, omdat userName null is, wordt de waarde van defaultName toegewezen.

Hier is een voorbeeld waarbij de waarde noch null noch undefined is.

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

• In dit geval, aangezien "Alice" al is ingesteld voor userName, wordt er geen toewijzing gedaan.

Vergelijking met andere toekenningoperators

JavaScript heeft ook meerdere andere toekenningoperators. In het bijzonder is het verschil met de logische OF-toekenningoperator (||=) belangrijk.

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

De logische OF-toewijzingsoperator kent een waarde toe, zelfs wanneer deze falsy-waarden zoals false, 0 of een lege string ("") tegenkomt, terwijl de nullish coalescing-toewijzingsoperator alleen werkt wanneer de waarde null of undefined is.

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

Omdat de nullish coalescing-toewijzingsoperator alleen werkt bij null of undefined, is deze erg handig wanneer je waarden zoals 0 of false wilt behouden.

Praktijkvoorbeelden

Een praktijkvoorbeeld van de null-coalescing-toewijzingsoperator kan als volgt zijn:.

1. Standaardwaarden instellen

   Het is nuttig om standaardwaarden in te stellen wanneer gebruikersinvoer of API-responses null of undefined kunnen zijn.

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. Optionele parameters afhandelen

   Het kan ook worden gebruikt om standaardacties uit te voeren wanneer functieargumenten niet zijn gespecificeerd.

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

Samenvatting

De nullish coalescing-toewijzingsoperator (??=) kent alleen een waarde toe wanneer de waarde aan de linkerkant null of undefined is, waardoor code beknopter wordt en ongewenste toewijzingen worden voorkomen. Vooral bij het omgaan met "falsy" waarden zoals 0 of false kan het geschikter zijn dan de traditionele logische OF-operator (||=).

Door gebruik te maken van deze operator kun je robuustere en beter leesbare code creëren.

Je kunt het bovenstaande artikel volgen met Visual Studio Code op ons YouTube-kanaal. Bekijk ook het YouTube-kanaal.

YouTube Video