JavaScript Nullish Coalescing: Standaardwaardetoewijzing onder de knie krijgen

In moderne JavaScript-ontwikkeling is het correct omgaan met null- en undefined-waarden cruciaal voor het schrijven van robuuste en voorspelbare code. De nullish coalescing-operator (??), geïntroduceerd in ES2020, biedt een beknopte en krachtige manier om standaardwaarden toe te wijzen, specifiek wanneer een variabele null of undefined is. Deze blogpost verkent de nuances van de nullish coalescing-operator, vergelijkt deze met de OR-operator (||) en illustreert de voordelen ervan met praktische voorbeelden die in diverse codeerscenario's toepasbaar zijn.

Nullish-waarden begrijpen: null en undefined

Voordat we dieper ingaan op de nullish coalescing-operator, is het essentieel om het onderscheid tussen null en undefined in JavaScript te begrijpen. Beide vertegenwoordigen de afwezigheid van een waarde, maar ze ontstaan onder verschillende omstandigheden.

• null: Vertegenwoordigt de opzettelijke afwezigheid van een waarde. Het wordt doorgaans door de programmeur toegewezen om aan te geven dat een variabele momenteel geen waarde heeft of dat een eigenschap ontbreekt.
• undefined: Geeft aan dat een variabele is gedeclareerd maar nog geen waarde heeft gekregen. Het kan ook voorkomen bij het benaderen van een niet-bestaande eigenschap van een object of wanneer een functie niet expliciet een waarde retourneert.

Het begrijpen van dit verschil is cruciaal omdat de nullish coalescing-operator zich specifiek op deze twee waarden richt.

Introductie van de Nullish Coalescing-operator (??)

De nullish coalescing-operator (??) is een logische operator die zijn rechteroperand retourneert wanneer zijn linkeroperand null of undefined is. Anders retourneert hij zijn linkeroperand. De syntaxis is eenvoudig:

            const result = value ?? defaultValue;
            

              
                Copy
              
            
          

In deze uitdrukking wordt, als value null of undefined is, aan result de waarde van defaultValue toegewezen. Anders wordt aan result de waarde van value toegewezen.

Praktische voorbeelden van Nullish Coalescing

Laten we het gebruik van de nullish coalescing-operator illustreren met enkele praktische voorbeelden:

1. Standaard gebruikersvoorkeuren instellen

Stel je voor dat je een webapplicatie bouwt waarin gebruikers hun voorkeuren kunnen aanpassen. Je kunt deze voorkeuren opslaan in een gebruikersprofielobject. Als een gebruiker niet expliciet een voorkeur heeft ingesteld, kun je de nullish coalescing-operator gebruiken om een standaardwaarde op te geven.

            const userProfile = {
  username: "johnDoe",
  theme: null // Gebruiker heeft nog geen thema gekozen
};

const theme = userProfile.theme ?? "light"; // Standaard naar licht thema

console.log(theme); // Output: "light"
            

              
                Copy
              
            
          

In dit voorbeeld wordt, omdat userProfile.theme null is, aan de variabele theme de standaardwaarde "light" toegewezen. Als de gebruiker een thema had ingesteld, bijvoorbeeld userProfile.theme = "dark";, dan zou aan de variabele theme de waarde "dark" zijn toegewezen.

2. Omgaan met ontbrekende API-gegevens

Bij het ophalen van gegevens uit een API komt het vaak voor dat gegevens ontbreken of onvolledig zijn. De nullish coalescing-operator kan worden gebruikt om standaardwaarden voor ontbrekende eigenschappen te bieden.

            const apiResponse = {
  data: {
    productName: "Voorbeeld Product",
    description: undefined // Geen beschrijving opgegeven
  }
};

const description = apiResponse.data.description ?? "Geen beschrijving beschikbaar.";

console.log(description); // Output: "Geen beschrijving beschikbaar."
            

              
                Copy
              
            
          

Hier is apiResponse.data.description undefined, dus wordt aan de variabele description het standaardbericht "Geen beschrijving beschikbaar." toegewezen.

3. Applicatie-instellingen configureren

In configuratiebestanden kunnen bepaalde instellingen optioneel zijn. U kunt de nullish coalescing-operator gebruiken om ervoor te zorgen dat uw applicatie redelijke standaardwaarden gebruikt als deze instellingen niet expliciet zijn gedefinieerd.

            const config = {
  apiUrl: "https://example.com/api",
  timeout: null // Geen time-out gespecificeerd
};

const timeout = config.timeout ?? 5000; // Standaard time-out van 5000ms

console.log(timeout); // Output: 5000
            

              
                Copy
              
            
          

In dit geval wordt, aangezien config.timeout null is, de variabele timeout ingesteld op de standaardwaarde van 5000 milliseconden.

Nullish Coalescing versus de OR-operator (||): Een cruciaal onderscheid

Het is belangrijk om het verschil te begrijpen tussen de nullish coalescing-operator (??) en de OR-operator (||). Hoewel beide kunnen worden gebruikt voor het toewijzen van standaardwaarden, gedragen ze zich anders bij het tegenkomen van falsy-waarden.

De OR-operator (||) retourneert zijn rechteroperand wanneer zijn linkeroperand een falsy-waarde is. Falsy-waarden in JavaScript omvatten:

• null
• undefined
• 0 (nul)
• NaN (Not a Number)
• '' (lege string)
• false

De nullish coalescing-operator (??) retourneert *alleen* zijn rechteroperand wanneer zijn linkeroperand null of undefined is. Het houdt geen rekening met andere falsy-waarden.

Het verschil illustreren met voorbeelden

Laten we een scenario bekijken waarin we een standaardwaarde willen toewijzen aan een variabele die mogelijk nul is.

            const quantity = 0;

// Met de OR-operator
const quantityOR = quantity || 1; // Standaard naar 1 als quantity falsy is

console.log(quantityOR); // Output: 1 (onjuist, aangezien 0 falsy is)

// Met de nullish coalescing-operator
const quantityNullish = quantity ?? 1; // Standaard naar 1 alleen als quantity null of undefined is

console.log(quantityNullish); // Output: 0 (juist, aangezien 0 niet null of undefined is)
            

              
                Copy
              
            
          

In dit voorbeeld wijst de OR-operator onterecht de standaardwaarde 1 toe omdat 0 een falsy-waarde is. De nullish coalescing-operator behoudt echter correct de waarde 0 omdat deze alleen controleert op null of undefined.

Een ander veelvoorkomend scenario is het omgaan met lege strings. Stel dat u de naam van een gebruiker wilt weergeven, maar als de naam niet is opgegeven, wilt u een standaardbericht tonen.

            const userName = ""; // Gebruiker heeft geen naam opgegeven

// Met de OR-operator
const displayNameOR = userName || "Gast";

console.log(displayNameOR); // Output: "Gast" (onjuist, aangezien "" falsy is)

// Met de nullish coalescing-operator
const displayNameNullish = userName ?? "Gast";

console.log(displayNameNullish); // Output: "" (onjuist, maar dichter bij het gewenste gedrag)
            

              
                Copy
              
            
          

Hoewel de nullish coalescing-operator het geval van de lege string niet perfect oplost (aangezien het nog steeds een lege string retourneert), benadrukt het het belang van het begrijpen van het verschil tussen ?? en ||. Als u lege strings *specifiek* wilt behandelen als gelijk aan null/undefined, heeft u waarschijnlijk een expliciete controle nodig: const displayName = userName === null || userName === undefined || userName === '' ? 'Gast' : userName;. De ??-operator voorkomt echter onverwacht gedrag met waarden zoals `0` of `false`.

Best Practices en overwegingen

Houd bij het gebruik van de nullish coalescing-operator rekening met de volgende best practices:

• Gebruik het wanneer u specifiek een standaardwaarde wilt opgeven voor null of undefined. Vermijd het gebruik ervan als een algemene operator voor het toewijzen van standaardwaarden.
• Houd rekening met falsy-waarden. Begrijp het verschil tussen ?? en || en kies de operator die het beste bij uw specifieke behoeften past.
• Combineer het met optional chaining (?.) voor veilige toegang tot eigenschappen. Hiermee kunt u geneste eigenschappen benaderen zonder fouten te veroorzaken als een tussenliggende eigenschap null of undefined is.

Nullish Coalescing combineren met Optional Chaining

Optional chaining (?.) stelt u in staat om veilig eigenschappen van een object te benaderen, zelfs als sommige tussenliggende eigenschappen null of undefined zijn. In combinatie met de nullish coalescing-operator kunt u standaardwaarden opgeven voor eigenschappen die mogelijk niet bestaan.

            const user = {
  profile: {
    address: {
      city: null
    }
  }
};

const city = user.profile?.address?.city ?? "Onbekende stad";

console.log(city); // Output: "Onbekende stad"
            

              
                Copy
              
            
          

In dit voorbeeld, als user.profile of user.profile.address null of undefined is, zal de optional chaining een fout voorkomen en zal de nullish coalescing-operator de standaardwaarde "Onbekende stad" toewijzen.

Wereldwijde toepassing: Diverse scenario's in verschillende culturen

De nullish coalescing-operator is universeel toepasbaar. Overweeg echter hoe gegevens in verschillende culturen worden verzameld en weergegeven bij het bepalen van standaardwaarden. Bijvoorbeeld:

• Getalnotatie: Hoewel een standaard getalnotatie in sommige regio's 0.00 kan zijn, gebruiken andere een , als decimaal scheidingsteken. Zorg ervoor dat uw standaardwaarden overeenkomen met de verwachte landinstellingen van de gebruiker.
• Datumnotaties: Een datumveld dat null wordt gelaten, kan standaard de huidige datum krijgen. Wees u bewust van veelgebruikte datumnotaties door uw internationale gebruikers (bijv. MM/DD/JJJJ vs. DD/MM/JJJJ).
• Adresvelden: Adresstructuren variëren wereldwijd aanzienlijk. Als een adresveld null is, kan het verstrekken van een standaardwaarde zoals "N.v.t." geschikt zijn. Vermijd het vooraf invullen met mogelijk onjuiste regionale informatie.
• Taalvoorkeuren: Als de taalvoorkeur van een gebruiker ontbreekt, stel dan standaard een breed begrepen taal in zoals Engels of gebruik browser-locatiedetectie (met toestemming van de gebruiker).

Overwegingen voor toegankelijkheid

Zorg er bij het gebruik van standaardwaarden voor dat uw applicatie toegankelijk blijft voor gebruikers met een beperking:

• Duidelijke communicatie: Als een standaardwaarde wordt gebruikt, geef dit dan duidelijk aan de gebruiker aan, vooral in formuliervelden. Gebruik labels en ARIA-attributen om context te bieden.
• Toetsenbordnavigatie: Zorg ervoor dat gebruikers gemakkelijk met het toetsenbord kunnen navigeren en standaardwaarden kunnen wijzigen.
• Compatibiliteit met schermlezers: Test uw applicatie met schermlezers om ervoor te zorgen dat standaardwaarden correct worden aangekondigd en kunnen worden overschreven.

Conclusie

De nullish coalescing-operator (??) is een waardevolle toevoeging aan de JavaScript-taal, die een beknopte en betrouwbare manier biedt om standaardwaarden toe te wijzen, specifiek wanneer een variabele null of undefined is. Door de nuances ervan te begrijpen en het te vergelijken met de OR-operator (||), kunt u robuustere, voorspelbaardere en beter onderhoudbare code schrijven. Vergeet niet om rekening te houden met best practices, het te combineren met optional chaining voor veilige toegang tot eigenschappen en uw standaardwaarden aan te passen aan de diverse behoeften van een wereldwijd publiek. Het beheersen van deze operator zal ongetwijfeld uw JavaScript-ontwikkelingsvaardigheden verbeteren en bijdragen aan het creëren van betere software-ervaringen voor gebruikers wereldwijd.