JavaScript Nullish Coalescing: Mestre tilordning av standardverdier

I moderne JavaScript-utvikling er det avgjørende å håndtere null- og undefined-verdier på en elegant måte for å skrive robust og forutsigbar kode. Nullish coalescing-operatoren (??), introdusert i ES2020, gir en kortfattet og kraftig måte å tilordne standardverdier spesifikt når en variabel er null eller undefined. Dette blogginnlegget utforsker nyansene ved nullish coalescing-operatoren, sammenligner den med OR-operatoren (||), og illustrerer fordelene med praktiske eksempler som kan brukes i ulike kodescenarioer.

Forstå nullish-verdier: null og undefined

Før vi dykker ned i nullish coalescing-operatoren, er det viktig å forstå forskjellen mellom null og undefined i JavaScript. Begge representerer fraværet av en verdi, men de oppstår under forskjellige omstendigheter.

• null: Representerer et bevisst fravær av en verdi. Det blir vanligvis tilordnet av programmereren for å indikere at en variabel for øyeblikket ikke har noen verdi eller at en egenskap mangler.
• undefined: Indikerer at en variabel har blitt deklarert, men ennå ikke har fått tilordnet en verdi. Det kan også oppstå når man prøver å få tilgang til en ikke-eksisterende egenskap i et objekt, eller når en funksjon ikke eksplisitt returnerer en verdi.

Å forstå denne forskjellen er avgjørende fordi nullish coalescing-operatoren spesifikt retter seg mot disse to verdiene.

Introduksjon til Nullish Coalescing-operatoren (??)

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. Syntaksen er enkel:

            const result = value ?? defaultValue;
            

              
                Copy
              
            
          

I dette uttrykket, hvis value er null eller undefined, vil result bli tilordnet verdien til defaultValue. Ellers vil result bli tilordnet verdien til value.

Praktiske eksempler på Nullish Coalescing

La oss illustrere bruken av nullish coalescing-operatoren med noen praktiske eksempler:

1. Sette standard brukerinnstillinger

Tenk deg at du bygger en nettapplikasjon der brukere kan tilpasse innstillingene sine. Du kan lagre disse innstillingene i et brukerprofilobjekt. Hvis en bruker ikke eksplisitt har satt en innstilling, kan du bruke nullish coalescing-operatoren for å gi en standardverdi.

            const userProfile = {
  username: "johnDoe",
  theme: null // Brukeren har ikke valgt et tema ennå
};

const theme = userProfile.theme ?? "light"; // Standard til lyst tema

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

              
                Copy
              
            
          

I dette eksempelet, fordi userProfile.theme er null, blir theme-variabelen tilordnet standardverdien "light". Hvis brukeren hadde satt et tema, for eksempel userProfile.theme = "dark";, ville theme-variabelen blitt tilordnet verdien "dark".

2. Håndtere manglende API-data

Når man henter data fra et API, er det vanlig å støte på manglende eller ufullstendige data. Nullish coalescing-operatoren kan brukes til å gi standardverdier for manglende egenskaper.

            const apiResponse = {
  data: {
    productName: "Example Product",
    description: undefined // Ingen beskrivelse er gitt
  }
};

const description = apiResponse.data.description ?? "Ingen beskrivelse tilgjengelig.";

console.log(description); // Utskrift: "Ingen beskrivelse tilgjengelig."
            

              
                Copy
              
            
          

Her er apiResponse.data.description undefined, så description-variabelen blir tilordnet standardmeldingen "Ingen beskrivelse tilgjengelig."

3. Konfigurere applikasjonsinnstillinger

I konfigurasjonsfiler kan visse innstillinger være valgfrie. Du kan bruke nullish coalescing-operatoren for å sikre at applikasjonen din bruker fornuftige standardverdier hvis disse innstillingene ikke er eksplisitt definert.

            const config = {
  apiUrl: "https://example.com/api",
  timeout: null // Ingen tidsavbrudd spesifisert
};

const timeout = config.timeout ?? 5000; // Standard tidsavbrudd på 5000 ms

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

              
                Copy
              
            
          

I dette tilfellet, siden config.timeout er null, blir timeout-variabelen satt til standardverdien på 5000 millisekunder.

Nullish Coalescing vs. OR-operatoren (||): En avgjørende forskjell

Det er viktig å forstå forskjellen mellom nullish coalescing-operatoren (??) og OR-operatoren (||). Selv om begge kan brukes til å tilordne standardverdier, oppfører de seg forskjellig når de møter 'falsy'-verdier.

OR-operatoren (||) returnerer sin høyre operand når dens venstre operand er en hvilken som helst 'falsy'-verdi. 'Falsy'-verdier i JavaScript inkluderer:

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

Nullish coalescing-operatoren (??) returnerer *kun* sin høyre operand når dens venstre operand er null eller undefined. Den tar ikke hensyn til andre 'falsy'-verdier.

Illustrere forskjellen med eksempler

La oss se på et scenario der vi ønsker å tilordne en standardverdi til en variabel som kan være null.

            const quantity = 0;

// Bruker OR-operatoren
const quantityOR = quantity || 1; // Standard til 1 hvis quantity er 'falsy'

console.log(quantityOR); // Utskrift: 1 (feil, siden 0 er 'falsy')

// Bruker nullish coalescing-operatoren
const quantityNullish = quantity ?? 1; // Standard til 1 bare hvis quantity er null eller undefined

console.log(quantityNullish); // Utskrift: 0 (riktig, siden 0 ikke er null eller undefined)
            

              
                Copy
              
            
          

I dette eksempelet tilordner OR-operatoren feilaktig standardverdien 1 fordi 0 er en 'falsy'-verdi. Nullish coalescing-operatoren, derimot, bevarer korrekt verdien 0 fordi den kun sjekker for null eller undefined.

Et annet vanlig scenario er håndtering av tomme strenger. Anta at du vil vise en brukers navn, men hvis navnet ikke er oppgitt, vil du vise en standardmelding.

            const userName = ""; // Brukeren har ikke oppgitt et navn

// Bruker OR-operatoren
const displayNameOR = userName || "Guest";

console.log(displayNameOR); // Utskrift: "Guest" (feil, siden "" er 'falsy')

// Bruker nullish coalescing-operatoren
const displayNameNullish = userName ?? "Guest";

console.log(displayNameNullish); // Utskrift: "" (feil, men nærmere ønsket oppførsel)
            

              
                Copy
              
            
          

Selv om nullish coalescing-operatoren ikke løser problemet med tomme strenger perfekt (siden den fortsatt returnerer en tom streng), fremhever den viktigheten av å forstå forskjellen mellom ?? og ||. Hvis du *spesifikt* ønsker å behandle tomme strenger som ekvivalente med null/undefined, vil du sannsynligvis trenge en eksplisitt sjekk: const displayName = userName === null || userName === undefined || userName === '' ? 'Guest' : userName;. ??-operatoren forhindrer imidlertid uventet oppførsel med verdier som `0` eller `false`.

Beste praksis og hensyn

Når du bruker nullish coalescing-operatoren, bør du vurdere følgende beste praksis:

• Bruk den når du spesifikt ønsker å gi en standardverdi for null eller undefined. Unngå å bruke den som en generell operator for tilordning av standardverdier.
• Vær oppmerksom på 'falsy'-verdier. Forstå forskjellen mellom ?? og ||, og velg den operatoren som best passer dine spesifikke behov.
• Kombiner den med optional chaining (?.) for sikker tilgang til egenskaper. Dette lar deg få tilgang til nestede egenskaper uten å forårsake feil hvis en mellomliggende egenskap er null eller undefined.

Kombinere Nullish Coalescing med Optional Chaining

Optional chaining (?.) lar deg trygt få tilgang til egenskapene til et objekt, selv om noen mellomliggende egenskaper er null eller undefined. Når den kombineres med nullish coalescing-operatoren, kan du gi standardverdier for egenskaper som kanskje ikke eksisterer.

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

const city = user.profile?.address?.city ?? "Ukjent by";

console.log(city); // Utskrift: "Ukjent by"
            

              
                Copy
              
            
          

I dette eksempelet, hvis enten user.profile eller user.profile.address er null eller undefined, vil optional chaining forhindre en feil, og nullish coalescing-operatoren vil tilordne standardverdien "Ukjent by".

Global anvendelse: Diverse scenarier på tvers av kulturer

Nullish coalescing-operatoren er universelt anvendelig. Vurder imidlertid hvordan data samles inn og representeres på tvers av ulike kulturer når du bestemmer standardverdier. For eksempel:

• Tallformatering: Mens et standard tallformat kan være `0.00` i noen regioner, bruker andre `,` som desimalskilletegn. Sørg for at standardverdiene dine samsvarer med forventede bruker-lokaliseringer.
• Datoformater: Et datofelt som er null, kan som standard settes til gjeldende dato. Vær oppmerksom på vanlige datoformater som brukes av dine internasjonale brukere (f.eks. MM/DD/ÅÅÅÅ vs. DD/MM/ÅÅÅÅ).
• Adressefelt: Adressestrukturer varierer betydelig globalt. Hvis et adressefelt er null, kan det være passende å gi en standard som "I/A" (ikke aktuelt). Unngå å forhåndsutfylle med potensielt feil regional informasjon.
• Språkinnstillinger: Hvis en brukers språkinnstilling mangler, kan du som standard bruke et bredt forstått språk som engelsk eller bruke nettleserens lokaliseringsdeteksjon (med brukerens tillatelse).

Hensyn til tilgjengelighet

Når du bruker standardverdier, må du sørge for at applikasjonen din forblir tilgjengelig for brukere med nedsatt funksjonsevne:

• Tydelig kommunikasjon: Hvis en standardverdi brukes, indiker dette tydelig for brukeren, spesielt i skjemafelt. Bruk etiketter og ARIA-attributter for å gi kontekst.
• Tastaturnavigasjon: Sørg for at brukere enkelt kan navigere og endre standardverdier ved hjelp av tastaturet.
• Skjermleserkompatibilitet: Test applikasjonen din med skjermlesere for å sikre at standardverdier blir lest opp riktig og kan overstyres.

Konklusjon

Nullish coalescing-operatoren (??) er et verdifullt tillegg til JavaScript-språket, og gir en kortfattet og pålitelig måte å tilordne standardverdier spesifikt når en variabel er null eller undefined. Ved å forstå nyansene og sammenligne den med OR-operatoren (||), kan du skrive mer robust, forutsigbar og vedlikeholdbar kode. Husk å vurdere beste praksis, kombinere den med optional chaining for sikker tilgang til egenskaper, og tilpasse standardverdiene dine til de ulike behovene til et globalt publikum. Å mestre denne operatoren vil utvilsomt forbedre dine JavaScript-utviklingsferdigheter og bidra til å skape bedre programvareopplevelser for brukere over hele verden.