JavaScript Nullish Coalescing: En Omfattende Guide til Tildeling af Standardværdier

I JavaScript er tildeling af standardværdier en almindelig opgave. Traditionelt har udviklere brugt OR-operatoren (||) til dette formål. Men nullish coalescing-operatoren (??), introduceret i ECMAScript 2020, giver en mere præcis og pålidelig måde at håndtere tildeling af standardværdier på, især når man arbejder med null- eller undefined-værdier. Denne guide giver en dybdegående gennemgang af nullish coalescing-operatoren, hvor vi udforsker dens syntaks, adfærd, forskelle fra OR-operatoren og praktiske anvendelsestilfælde.

Hvad er Nullish Coalescing?

Nullish coalescing-operatoren (??) er en logisk operator, der returnerer sin højre operand, når dens venstre operand er null eller undefined. Ellers returnerer den sin venstre operand. Med enklere ord giver den en standardværdi, kun når en variabel er strengt null eller undefined.

Syntaks

Syntaksen for nullish coalescing-operatoren er ligetil:

leftOperand ?? rightOperand

Her er leftOperand den variabel eller det udtryk, du vil kontrollere for null eller undefined, og rightOperand er den standardværdi, du vil tildele, hvis leftOperand rent faktisk er null eller undefined.

Eksempel

Overvej følgende eksempel:

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

I dette eksempel tildeles username standardværdien "Guest", fordi den oprindeligt er null. Ligeledes tildeles age værdien 25, fordi den starter som undefined. Dog beholder city sin oprindelige værdi, "London", fordi den hverken er null eller undefined.

Nullish vs. Falsy-værdier

Det er afgørende at forstå forskellen mellem nullish- og falsy-værdier i JavaScript. En nullish-værdi er enten null eller undefined. En falsy-værdi er en værdi, der betragtes som falsk, når den optræder i en boolesk kontekst. Falsy-værdier inkluderer:

• null
• undefined
• 0 (nul)
• NaN (Not a Number)
• '' (tom streng)
• false

Den afgørende forskel er, at nullish coalescing-operatoren kun tjekker for null eller undefined, hvorimod OR-operatoren (||) tjekker for enhver falsy-værdi.

Forskellen mellem ?? og ||

OR-operatoren (||) er en logisk OR-operator, der returnerer den højre operand, hvis den venstre operand er falsy. Selvom den kan bruges til at tildele standardværdier, kan den føre til uventet adfærd, når man arbejder med værdier som 0 eller en tom streng.

Eksempel: Faldgruberne ved ||

const quantity = 0 || 10; // Vi ønsker en standard på 10, hvis mængden mangler
console.log(quantity); // Output: 10 (Uventet!) fordi 0 er falsy

const text = '' || 'Default Text'; // Vi ønsker en standardtekst, hvis teksten mangler
console.log(text); // Output: Default Text (Uventet!) fordi '' er falsy

I det første eksempel havde vi til hensigt kun at tildele en standardmængde på 10, hvis quantity manglede (null eller undefined). Men fordi 0 er en falsy-værdi, tildelte OR-operatoren fejlagtigt standardværdien. Tilsvarende får den tomme streng standardteksten til at blive vist, selvom strengen eksisterer (men er tom).

Brug af ?? for Præcision

Lad os omskrive det forrige eksempel ved hjælp af nullish coalescing-operatoren:

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

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

Nu er outputtet som forventet. Nullish coalescing-operatoren tjekker kun for null eller undefined, så 0 og '' behandles som gyldige værdier, og deres oprindelige værdier bevares.

Anvendelsestilfælde for Nullish Coalescing

Nullish coalescing-operatoren er nyttig i forskellige scenarier, hvor du kun behøver at angive standardværdier, når en variabel er strengt null eller undefined. Her er nogle almindelige anvendelsestilfælde:

1. Håndtering af Valgfrie Funktionsparametre

Når du definerer en funktion med valgfrie parametre, kan du bruge nullish coalescing-operatoren til at angive standardværdier, hvis parametrene ikke er angivet.

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. Indstilling af Standardkonfigurationsmuligheder

Når du arbejder med konfigurationsobjekter, kan du bruge nullish coalescing-operatoren til at sikre, at standardværdier bruges, hvis visse konfigurationsmuligheder ikke er specificeret.

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

function fetchData(options) {
  const timeout = options.timeout ?? 10000; // Standard timeout på 10 sekunder
  const retries = options.retries ?? 5; // Standard 5 forsøg
  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. Adgang til Indlejrede Objektegenskaber

Når du tilgår egenskaber i indlejrede objekter, kan nullish coalescing-operatoren kombineres med optional chaining (?.) for at angive standardværdier, hvis nogen af de mellemliggende egenskaber er null eller undefined.

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. Arbejde med API'er og Eksterne Data

Når du henter data fra API'er eller eksterne kilder, kan nullish coalescing-operatoren bruges til at angive standardværdier, hvis visse datafelter mangler eller har null- eller undefined-værdier. Overvej at hente brugerdata fra forskellige regioner. Antag, at nogle regioner måske ikke inkluderer `country`-feltet i deres brugerdata.

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

// Simulering af forskellige API-svar:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// For at teste dette ville du have brug for et rigtigt API eller en mock fetch.
// Til demonstrationsformål simulerer vi svarene:
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

Operatorpræcedens

Nullish coalescing-operatoren har en relativt lav operatorpræcedens. Den er lavere end OR- (||) og AND- (&&) operatorerne. Derfor er det vigtigt at bruge parenteser for eksplicit at definere rækkefølgen af operationer, når nullish coalescing-operatoren kombineres med andre logiske operatorer. Undladelse heraf kan resultere i syntaksfejl eller uventet adfærd.

Eksempel: Brug af Parenteser for Klarhed

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

// Med parenteser (Korrekt)
const result = false || (null ?? "Default");
console.log(result); // Output: Default

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

I det første eksempel resulterer manglen på parenteser i en SyntaxError, fordi JavaScript-motoren ikke kan bestemme den tilsigtede rækkefølge af operationerne. Ved at tilføje parenteser fortæller vi eksplicit motoren, at den først skal evaluere nullish coalescing-operatoren. Det andet eksempel er gyldigt; dog er outputtet anderledes, fordi ||-udtrykket evalueres først.

Browserkompatibilitet

Nullish coalescing-operatoren (??) er en relativt ny funktion, så det er afgørende at overveje browserkompatibilitet, især hvis du sigter mod ældre browsere. De fleste moderne browsere understøtter nullish coalescing-operatoren, herunder:

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

Hvis du har brug for at understøtte ældre browsere, kan du bruge en transpiler som Babel til at konvertere din kode til en kompatibel version af JavaScript. Babel vil omdanne ??-operatoren til tilsvarende JavaScript-kode, der fungerer i ældre miljøer.

Bedste Praksis

Her er nogle bedste praksisser for effektiv brug af nullish coalescing-operatoren:

• Brug ?? til nullish-tjek: Brug nullish coalescing-operatoren (??), når du specifikt ønsker at angive en standardværdi, kun når en variabel er null eller undefined.
• Brug parenteser til komplekse udtryk: Når du kombinerer nullish coalescing-operatoren med andre logiske operatorer, skal du bruge parenteser for klart at definere rækkefølgen af operationer.
• Overvej browserkompatibilitet: Tjek browserkompatibilitet og brug en transpiler, hvis det er nødvendigt for at understøtte ældre browsere.
• Brug konsekvent: Anvend ??, hvor det er passende, for en mere forudsigelig kodestil på tværs af projektet.
• Kombiner med optional chaining: Brug ?? i sammenhæng med optional chaining ?. for sikkert at tilgå og tildele standardværdier til indlejrede egenskaber i objekter.

Globale Overvejelser

Når du udvikler for et globalt publikum, skal du overveje følgende punkter i forbindelse med tildeling af standardværdier:

• Lokalisering: Standardværdier skal muligvis lokaliseres baseret på brugerens sprog eller region. For eksempel et standardvalutasymbol eller datoformat.
• Kulturelle Normer: Visse standardværdier skal muligvis justeres baseret på kulturelle normer. For eksempel skal en standardhilsen muligvis være forskellig i forskellige kulturer.
• Tilgængelighed: Sørg for, at standardværdier er tilgængelige og forståelige for brugere med handicap. Giv klare og beskrivende etiketter til standardværdier i brugergrænseflader.
• Tidszoner og Datoer: Når du arbejder med datoer og tider, skal du bruge passende tidszoner og datoformater for at sikre, at standardværdier vises korrekt for brugere i forskellige regioner.

Eksempel: Lokalisering med Nullish Coalescing

Lad os sige, at du vil vise en standardvelkomstbesked på forskellige sprog baseret på brugerens lokalitet. Du kan bruge nullish coalescing-operatoren til at angive en standardbesked, hvis en lokaliseret besked ikke er tilgængelig.

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

  const message = localizedMessages[locale] ?? "Welcome!"; // Standard til engelsk, hvis sprogversion ikke findes
  return message;
}

console.log(getWelcomeMessage("fr")); // Output: Bienvenue !
console.log(getWelcomeMessage("es")); // Output: Welcome! (Standard til engelsk)

Konklusion

Nullish coalescing-operatoren (??) er en værdifuld tilføjelse til JavaScript-sproget. Den giver en mere præcis og pålidelig måde at tildele standardværdier på sammenlignet med OR-operatoren (||), især når man arbejder med værdier som 0 eller tomme strenge. Ved at forstå dens syntaks, adfærd og anvendelsestilfælde kan du skrive renere, mere vedligeholdelsesvenlig kode, der præcist håndterer tildeling af standardværdier. Husk at overveje browserkompatibilitet, operatorpræcedens og globale hensyn, når du bruger nullish coalescing-operatoren i dine projekter.

Ved at følge de bedste praksisser, der er beskrevet i denne guide, kan du effektivt udnytte nullish coalescing-operatoren til at forbedre kvaliteten og pålideligheden af din JavaScript-kode, hvilket gør den mere robust og lettere at forstå. Husk altid at prioritere klarhed og vedligeholdelsesvenlighed i din kode, og nullish coalescing-operatoren kan være et stærkt værktøj til at nå disse mål.