JavaScript Nullish Coalescing: En Omfattende Guide til Tildeling av Standardverdier

I JavaScript er tildeling av standardverdier en vanlig oppgave. Tradisjonelt har utviklere brukt OR-operatoren (||) til dette formålet. Imidlertid gir nullish coalescing-operatoren (??), introdusert i ECMAScript 2020, en mer presis og pålitelig måte å håndtere tildeling av standardverdier på, spesielt når man arbeider med null- eller undefined-verdier. Denne guiden gir en grundig gjennomgang av nullish coalescing-operatoren, og utforsker dens syntaks, oppførsel, forskjeller fra OR-operatoren og praktiske bruksområder.

Hva er Nullish Coalescing?

Nullish coalescing-operatoren (??) er en logisk operator som returnerer sin høyre operand når dens venstre operand er null eller undefined. Ellers returnerer den sin venstre operand. Enkelt sagt gir den en standardverdi bare når en variabel er strengt null eller undefined.

Syntaks

Syntaksen for nullish coalescing-operatoren er enkel:

leftOperand ?? rightOperand

Her er leftOperand variabelen eller uttrykket du vil sjekke for null eller undefined, og rightOperand er standardverdien du vil tildele hvis leftOperand faktisk er null eller undefined.

Eksempel

Vurder følgende eksempel:

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

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

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

I dette eksempelet blir username tildelt standardverdien "Guest" fordi den i utgangspunktet er null. Tilsvarende blir age tildelt 25 fordi den starter som undefined. Imidlertid beholder city sin opprinnelige verdi, "London", fordi den verken er null eller undefined.

Nullish- vs. Falsy-verdier

Det er avgjørende å forstå forskjellen mellom nullish- og falsy-verdier i JavaScript. En nullish-verdi er enten null eller undefined. En falsy-verdi er en verdi som anses som usann (false) når den møtes i en boolsk kontekst. Falsy-verdier inkluderer:

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

Den viktigste forskjellen er at nullish coalescing-operatoren kun sjekker for null eller undefined, mens OR-operatoren (||) sjekker for enhver falsy-verdi.

Forskjellen mellom `??` og `||`

OR-operatoren (||) er en logisk OR-operator som returnerer den høyre operanden hvis den venstre operanden er falsy. Selv om den kan brukes til å tildele standardverdier, kan den føre til uventet oppførsel når man håndterer verdier som 0 eller en tom streng.

Eksempel: Fallgruvene med `||`

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

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

I det første eksempelet hadde vi til hensikt å tildele en standardmengde på 10 bare hvis quantity manglet (null eller undefined). Men fordi 0 er en falsy-verdi, tildelte OR-operatoren feilaktig standardverdien. Tilsvarende fører den tomme strengen til at standardteksten vises selv om strengen eksisterer (men er tom).

Bruk av `??` for presisjon

La oss skrive om det forrige eksempelet ved hjelp av nullish coalescing-operatoren:

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

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

Nå er utskriften som forventet. Nullish coalescing-operatoren sjekker bare for null eller undefined, så 0 og '' behandles som gyldige verdier, og deres opprinnelige verdier blir bevart.

Brukstilfeller for Nullish Coalescing

Nullish coalescing-operatoren er nyttig i ulike scenarioer der du trenger å gi standardverdier bare når en variabel er strengt null eller undefined. Her er noen vanlige bruksområder:

1. Håndtering av valgfrie funksjonsparametere

Når du definerer en funksjon med valgfrie parametere, kan du bruke nullish coalescing-operatoren for å gi standardverdier hvis parameterne ikke blir oppgitt.

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

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

2. Sette standard konfigurasjonsalternativer

Når du jobber med konfigurasjonsobjekter, kan du bruke nullish coalescing-operatoren for å sikre at standardverdier brukes hvis visse konfigurasjonsalternativer ikke er spesifisert.

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øk
  console.log(`Timeout: ${timeout}, Retries: ${retries}`);
}

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

3. Tilgang til nestede objektegenskaper

Når du får tilgang til egenskapene til nestede objekter, kan nullish coalescing-operatoren kombineres med optional chaining (?.) for å gi standardverdier hvis noen av de mellomliggende egenskapene er null eller undefined.

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

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

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

4. Arbeide med API-er og eksterne data

Når du henter data fra API-er eller eksterne kilder, kan nullish coalescing-operatoren brukes til å gi standardverdier hvis visse datafelter mangler eller har null- eller undefined-verdier. Tenk deg å hente brukerdata fra forskjellige regioner. Anta at noen regioner kanskje ikke inkluderer country-feltet i sine brukerdata.

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

// Simulerer forskjellige API-responser:
const userWithCountry = { name: "John", country: "USA", timezone: "EST" };
const userWithoutCountry = { name: "Jane", timezone: "GMT" };

// For å teste dette, ville du trengt et faktisk API eller en mock fetch.
// For demonstrasjonsformål, la oss simulere responsene:
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); // Utskrift: User is from: USA, Timezone: EST
getUserData(456); // Utskrift: User is from: Unknown Country, Timezone: GMT

Operatorpresedens

Nullish coalescing-operatoren har relativt lav operatorpresedens. Den er lavere enn OR (||)- og AND (&&)-operatorene. Derfor, når du kombinerer nullish coalescing-operatoren med andre logiske operatorer, er det viktig å bruke parenteser for å eksplisitt definere rekkefølgen av operasjonene. Unnlatelse av dette kan føre til syntaksfeil eller uventet oppførsel.

Eksempel: Bruk av parenteser for klarhet

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

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

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

I det første eksempelet resulterer mangelen på parenteser i en SyntaxError fordi JavaScript-motoren ikke kan bestemme den tiltenkte rekkefølgen av operasjonene. Ved å legge til parenteser forteller vi eksplisitt motoren at den skal evaluere nullish coalescing-operatoren først. Det andre eksempelet er gyldig; imidlertid er utskriften annerledes fordi ||-uttrykket blir evaluert først.

Nettleserkompatibilitet

Nullish coalescing-operatoren (??) er en relativt ny funksjon, så det er avgjørende å vurdere nettleserkompatibilitet, spesielt hvis du retter deg mot eldre nettlesere. De fleste moderne nettlesere støtter nullish coalescing-operatoren, inkludert:

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

Hvis du trenger å støtte eldre nettlesere, kan du bruke en transpiler som Babel for å konvertere koden din til en kompatibel versjon av JavaScript. Babel vil transformere ??-operatoren til ekvivalent JavaScript-kode som fungerer i eldre miljøer.

Beste praksis

Her er noen beste praksiser for å bruke nullish coalescing-operatoren effektivt:

Bruk ?? for nullish-sjekker: Bruk nullish coalescing-operatoren (??) når du spesifikt ønsker å gi en standardverdi kun når en variabel er null eller undefined.
Bruk parenteser for komplekse uttrykk: Når du kombinerer nullish coalescing-operatoren med andre logiske operatorer, bruk parenteser for å tydelig definere rekkefølgen av operasjonene.
Vurder nettleserkompatibilitet: Sjekk nettleserkompatibilitet og bruk en transpiler om nødvendig for å støtte eldre nettlesere.
Bruk konsekvent: Ta i bruk ?? der det er hensiktsmessig for en mer forutsigbar kodestil på tvers av prosjektet.
Kombiner med optional chaining: Bruk ?? i forbindelse med optional chaining ?. for å trygt få tilgang til og tildele standardverdier til nestede egenskaper i objekter.

Globale betraktninger

Når du utvikler for et globalt publikum, bør du vurdere følgende punkter knyttet til tildeling av standardverdier:

Lokalisering: Standardverdier må kanskje lokaliseres basert på brukerens språk eller region. For eksempel et standard valutasymbol eller datoformat.
Kulturelle normer: Visse standardverdier må kanskje justeres basert på kulturelle normer. For eksempel kan en standard hilsen måtte være annerledes i forskjellige kulturer.
Tilgjengelighet: Sørg for at standardverdier er tilgjengelige og forståelige for brukere med nedsatt funksjonsevne. Gi klare og beskrivende etiketter for standardverdier i brukergrensesnitt.
Tidssoner og datoer: Når du jobber med datoer og tider, bruk passende tidssoner og datoformater for å sikre at standardverdier vises korrekt for brukere i forskjellige regioner.

Eksempel: Lokalisering med Nullish Coalescing

La oss si at du vil vise en standard velkomstmelding på forskjellige språk basert på brukerens locale. Du kan bruke nullish coalescing-operatoren for å gi en standardmelding hvis en lokalisert melding ikke er tilgjengelig.

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

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

console.log(getWelcomeMessage("fr")); // Utskrift: Bienvenue !
console.log(getWelcomeMessage("es")); // Utskrift: Welcome! (Bruker engelsk som standard)

Konklusjon

Nullish coalescing-operatoren (??) er et verdifullt tillegg til JavaScript-språket. Den gir en mer presis og pålitelig måte å tildele standardverdier på sammenlignet med OR-operatoren (||), spesielt når man håndterer verdier som 0 eller tomme strenger. Ved å forstå dens syntaks, oppførsel og bruksområder, kan du skrive renere, mer vedlikeholdbar kode som håndterer tildeling av standardverdier nøyaktig. Husk å vurdere nettleserkompatibilitet, operatorpresedens og globale hensyn når du bruker nullish coalescing-operatoren i prosjektene dine.

Ved å følge de beste praksisene som er skissert i denne guiden, kan du effektivt utnytte nullish coalescing-operatoren for å forbedre kvaliteten og påliteligheten til JavaScript-koden din, noe som gjør den mer robust og lettere å forstå. Husk å alltid prioritere klarhet og vedlikeholdbarhet i koden din, og nullish coalescing-operatoren kan være et kraftig verktøy for å oppnå disse målene.