JavaScript Nullish Coalescing: Een Uitgebreide Gids voor het Toewijzen van Standaardwaarden

In JavaScript is het toewijzen van standaardwaarden een veelvoorkomende taak. Traditioneel hebben ontwikkelaars de OR-operator (||) voor dit doel gebruikt. De nullish coalescing-operator (??), geïntroduceerd in ECMAScript 2020, biedt echter een preciezere en betrouwbaardere manier om standaardwaardetoewijzingen af te handelen, specifiek wanneer het gaat om null- of undefined-waarden. Deze gids biedt een diepgaande kijk op de nullish coalescing-operator, en verkent de syntaxis, het gedrag, de verschillen met de OR-operator en praktische gebruiksscenario's.

Wat is Nullish Coalescing?

De nullish coalescing-operator (??) is een logische operator die zijn rechteroperand retourneert wanneer zijn linkeroperand null of undefined is. Anders retourneert het zijn linkeroperand. Eenvoudig gezegd, het levert alleen een standaardwaarde op wanneer een variabele strikt null of undefined is.

Syntaxis

De syntaxis voor de nullish coalescing-operator is eenvoudig:

linkerOperand ?? rechterOperand

Hier is linkerOperand de variabele of expressie die u wilt controleren op null of undefined, en rechterOperand is de standaardwaarde die u wilt toewijzen als linkerOperand inderdaad null of undefined is.

Voorbeeld

Bekijk het volgende voorbeeld:

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

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

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

In dit voorbeeld krijgt username de standaardwaarde "Guest" toegewezen omdat deze aanvankelijk null is. Op dezelfde manier wordt aan age 25 toegewezen omdat deze begint als undefined. city behoudt echter zijn oorspronkelijke waarde, "London", omdat het noch null, noch undefined is.

Nullish versus Falsy Waarden

Het is cruciaal om het verschil te begrijpen tussen nullish en falsy waarden in JavaScript. Een nullish waarde is ofwel null of undefined. Een falsy waarde is een waarde die als onwaar wordt beschouwd wanneer deze in een Booleaanse context wordt aangetroffen. Falsy waarden zijn onder andere:

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

Het belangrijkste onderscheid is dat de nullish coalescing-operator alleen controleert op null of undefined, terwijl de OR-operator (||) controleert op elke falsy waarde.

Het Verschil Tussen ?? en ||

De OR-operator (||) is een logische OR-operator die de rechteroperand retourneert als de linkeroperand falsy is. Hoewel deze kan worden gebruikt voor het toewijzen van standaardwaarden, kan dit leiden tot onverwacht gedrag bij het omgaan met waarden zoals 0 of een lege string.

Voorbeeld: De Valkuilen van ||

const quantity = 0 || 10; // We bedoelen een standaard van 10 als de hoeveelheid ontbreekt
console.log(quantity); // Output: 10 (Onverwacht!) omdat 0 falsy is

const text = '' || 'Default Text'; // We bedoelen een standaardtekst als de tekst ontbreekt
console.log(text); // Output: Default Text (Onverwacht!) omdat '' falsy is

In het eerste voorbeeld was het de bedoeling om een standaardhoeveelheid van 10 toe te wijzen alleen als quantity ontbrak (null of undefined). Omdat 0 echter een falsy waarde is, wees de OR-operator ten onrechte de standaardwaarde toe. Op dezelfde manier zorgt de lege string ervoor dat de standaardtekst wordt getoond, zelfs als de string bestaat (maar leeg is).

Gebruik van ?? voor Precisie

Laten we het vorige voorbeeld herschrijven met de nullish coalescing-operator:

const quantity = 0 ?? 10;
console.log(quantity); // Output: 0 (Correct!)

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

Nu is de output zoals verwacht. De nullish coalescing-operator controleert alleen op null of undefined, dus 0 en '' worden behandeld als geldige waarden, en hun oorspronkelijke waarden blijven behouden.

Toepassingen voor Nullish Coalescing

De nullish coalescing-operator is nuttig in verschillende scenario's waar u standaardwaarden moet opgeven alleen wanneer een variabele strikt null of undefined is. Hier zijn enkele veelvoorkomende toepassingen:

1. Omgaan met Optionele Functieparameters

Bij het definiëren van een functie met optionele parameters kunt u de nullish coalescing-operator gebruiken om standaardwaarden te bieden als de parameters niet worden meegegeven.

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

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

2. Standaard Configuratie-opties Instellen

Wanneer u met configuratieobjecten werkt, kunt u de nullish coalescing-operator gebruiken om ervoor te zorgen dat standaardwaarden worden gebruikt als bepaalde configuratie-opties niet zijn opgegeven.

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

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Standaard timeout van 10 seconden
  const retries = options.retries ?? 5; // Standaard 5 pogingen
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

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

3. Toegang tot Geneste Objecteigenschappen

Bij het benaderen van eigenschappen van geneste objecten kan de nullish coalescing-operator worden gecombineerd met optional chaining (?.) om standaardwaarden te bieden als een van de tussenliggende eigenschappen null of undefined is.

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

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

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

4. Werken met API's en Externe Data

Bij het ophalen van gegevens uit API's of externe bronnen kan de nullish coalescing-operator worden gebruikt om standaardwaarden te bieden als bepaalde datavelden ontbreken of null- of undefined-waarden hebben. Overweeg het ophalen van gebruikersgegevens uit verschillende regio's. Ga ervan uit dat sommige regio's het veld `country` mogelijk niet in hun gebruikersgegevens opnemen.

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);
  }
}

// Simulatie van verschillende API-reacties:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// Om dit te testen, zou je een echte API of een mock fetch nodig hebben.
// Voor demonstratiedoeleinden simuleren we de reacties:
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); // Output: User is from: USA, Timezone: EST
getUserData(456); // Output: User is from: Unknown Country, Timezone: GMT

Operatorvoorrang

De nullish coalescing-operator heeft een relatief lage operatorvoorrang. Het is lager dan de OR (||) en AND (&&) operatoren. Daarom is het bij het combineren van de nullish coalescing-operator met andere logische operatoren essentieel om haakjes te gebruiken om de volgorde van bewerkingen expliciet te definiëren. Als u dit niet doet, kan dit leiden tot syntaxisfouten of onverwacht gedrag.

Voorbeeld: Gebruik van Haakjes voor Duidelijkheid

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

// Met haakjes (Correct)
const result = false || (null ?? "Default");
console.log(result); // Output: Default

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

In het eerste voorbeeld resulteert het ontbreken van haakjes in een SyntaxError omdat de JavaScript-engine de beoogde volgorde van bewerkingen niet kan bepalen. Door haakjes toe te voegen, vertellen we de engine expliciet om eerst de nullish coalescing-operator te evalueren. Het tweede voorbeeld is geldig; de output is echter anders omdat de `||`-expressie als eerste wordt geëvalueerd.

Browsercompatibiliteit

De nullish coalescing-operator (??) is een relatief nieuwe functie, dus het is cruciaal om rekening te houden met browsercompatibiliteit, vooral als u zich richt op oudere browsers. De meeste moderne browsers ondersteunen de nullish coalescing-operator, waaronder:

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

Als u oudere browsers moet ondersteunen, kunt u een transpiler zoals Babel gebruiken om uw code om te zetten naar een compatibele versie van JavaScript. Babel zal de ??-operator omzetten in equivalente JavaScript-code die in oudere omgevingen werkt.

Best Practices

Hier zijn enkele best practices voor het effectief gebruiken van de nullish coalescing-operator:

• Gebruik ?? voor nullish controles: Gebruik de nullish coalescing-operator (??) wanneer u specifiek een standaardwaarde wilt opgeven alleen als een variabele null of undefined is.
• Gebruik haakjes voor complexe expressies: Bij het combineren van de nullish coalescing-operator met andere logische operatoren, gebruik haakjes om de volgorde van bewerkingen duidelijk te definiëren.
• Houd rekening met browsercompatibiliteit: Controleer de browsercompatibiliteit en gebruik indien nodig een transpiler om oudere browsers te ondersteunen.
• Gebruik consequent: Pas ?? toe waar van toepassing voor een voorspelbaardere codeerstijl in het hele project.
• Combineer met optional chaining: Gebruik ?? in combinatie met optional chaining ?. om veilig toegang te krijgen tot en standaardwaarden toe te wijzen aan geneste eigenschappen van objecten.

Globale Overwegingen

Bij het ontwikkelen voor een wereldwijd publiek, overweeg de volgende punten met betrekking tot het toewijzen van standaardwaarden:

• Lokalisatie: Standaardwaarden moeten mogelijk worden gelokaliseerd op basis van de taal of regio van de gebruiker. Bijvoorbeeld een standaard valutasymbool of datumnotatie.
• Culturele Normen: Bepaalde standaardwaarden moeten mogelijk worden aangepast op basis van culturele normen. Bijvoorbeeld, een standaard welkomstbericht kan in verschillende culturen anders moeten zijn.
• Toegankelijkheid: Zorg ervoor dat standaardwaarden toegankelijk en begrijpelijk zijn voor gebruikers met een handicap. Bied duidelijke en beschrijvende labels voor standaardwaarden in gebruikersinterfaces.
• Tijdzones en Datums: Bij het werken met datums en tijden, gebruik de juiste tijdzones en datumnotaties om ervoor te zorgen dat standaardwaarden correct worden weergegeven aan gebruikers in verschillende regio's.

Voorbeeld: Lokalisatie met Nullish Coalescing

Stel dat u een standaard welkomstbericht wilt weergeven in verschillende talen op basis van de landinstelling van de gebruiker. U kunt de nullish coalescing-operator gebruiken om een standaardbericht te bieden als er geen gelokaliseerd bericht beschikbaar is.

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

  const message = localizedMessages[locale] ?? "Welcome!"; // Val terug op Engels als de landinstelling niet wordt gevonden
  return message;
}

console.log(getWelcomeMessage("fr")); // Output: Bienvenue !
console.log(getWelcomeMessage("es")); // Output: Welcome! (Valt terug op Engels)

Conclusie

De nullish coalescing-operator (??) is een waardevolle toevoeging aan de JavaScript-taal. Het biedt een preciezere en betrouwbaardere manier om standaardwaarden toe te wijzen in vergelijking met de OR-operator (||), vooral bij het omgaan met waarden zoals 0 of lege strings. Door de syntaxis, het gedrag en de toepassingen ervan te begrijpen, kunt u schonere, beter onderhoudbare code schrijven die standaardwaardetoewijzingen nauwkeurig afhandelt. Denk eraan om rekening te houden met browsercompatibiliteit, operatorvoorrang en globale overwegingen bij het gebruik van de nullish coalescing-operator in uw projecten.

Door de best practices in deze gids te volgen, kunt u de nullish coalescing-operator effectief benutten om de kwaliteit en betrouwbaarheid van uw JavaScript-code te verbeteren, waardoor deze robuuster en gemakkelijker te begrijpen wordt. Onthoud dat u altijd prioriteit moet geven aan duidelijkheid en onderhoudbaarheid in uw code, en de nullish coalescing-operator kan een krachtig hulpmiddel zijn om deze doelen te bereiken.