Forstå Nullish Coalescing Operatoren (??) i JS

I den konstant udviklende verden af JavaScript er det afgørende for udviklere at holde sig ajour med de nyeste funktioner og forbedringer, sproget tilbyder. En sådan kraftfuld funktion, introduceret i ECMAScript 2020 (også kendt som ES11), er Nullish Coalescing Operatoren, repræsenteret ved to spørgsmålstegn (`??`). Denne operator giver en mere intuitiv og renere måde at håndtere værdier, der kan være `null` eller `undefined`. I denne artikel vil vi dykke ned i nuancerne af denne operator, forklare dens fordele i forhold til ældre metoder og demonstrere dens anvendelse gennem en række kodeeksempler for at cementere din forståelse.

Hvad er Nullish Coalescing Operatoren (`??`)?

Grundlæggende er Nullish Coalescing Operatoren (`??`) en logisk operator, der tager to operander. Den returnerer sin højre operand, når dens venstre operand er enten `null` eller `undefined`. I alle andre tilfælde returnerer den sin venstre operand. Dette adskiller den markant fra den velkendte logiske ELLER-operator (`||`), som vi vil udforske nærmere senere.

Syntaksen er enkel og ligetil:

let resultat = venstreOperand ?? højreOperand;

Denne ene linje kode er funktionelt ækvivalent med følgende mere detaljerede `if`-sætning:

let resultat; if (venstreOperand !== null && venstreOperand !== undefined) { resultat = venstreOperand; } else { resultat = højreOperand; }

Som du kan se, tilbyder `??`-operatoren en meget mere kompakt og læselig måde at tildele standardværdier på.

Eksempel: Håndtering af `null` og `undefined`

Lad os se på et grundlæggende eksempel. Forestil dig, at du har en variabel, der potentielt kan være `null`, og du vil tildele en standardværdi på 10, hvis det er tilfældet.

let brugerInput = null; let antalVarer = brugerInput ?? 10; console.log(antalVarer); // Output: 10 let defineretInput = 5; let defineretAntal = defineretInput ?? 10; console.log(defineretAntal); // Output: 5

I det første tilfælde er `brugerInput` `null`, så operatoren returnerer den højre operand, `10`. I det andet tilfælde er `defineretInput` `5` (hverken `null` eller `undefined`), så operatoren returnerer den venstre operand, `5`.

Den Væsentlige Forskel: `??` versus `||`

For at forstå den virkelige styrke ved `??`-operatoren er det afgørende at sammenligne den med den logiske ELLER-operator (`||`). Før introduktionen af `??` var `||` den mest almindelige måde at tildele standardværdier på. Problemet med `||` er, at den reagerer på alle "falsy" værdier, ikke kun `null` og `undefined`.

I JavaScript er følgende værdier falsy:

• `false`
• `0` (tallet nul)
• `-0` (negativt nul)
• `0n` (BigInt nul)
• `""` (en tom streng)
• `null`
• `undefined`
• `NaN` (Not a Number)

Værdierne `null` og `undefined` er de eneste, der betragtes som "nullish". Dette skel er kernen i forskellen mellem de to operatorer. `||`-operatoren vil returnere den højre operand, hvis den venstre er *enhver* af de ovennævnte falsy værdier. Dette kan føre til uventede fejl, især når `0` eller en tom streng er gyldige og tilsigtede værdier.

Sammenligningstabel: `??` vs. `||`

Tabellen nedenfor illustrerer tydeligt, hvordan de to operatorer opfører sig forskelligt med forskellige falsy input.

Eksempel på en almindelig fejl med `||`

Forestil dig en funktion, der skal opdatere en brugers score. En bruger kan have en score på `0`, hvilket er en fuldt ud gyldig værdi.

function visScore(score) { const endeligScore = score || 'Ingen score angivet'; console.log(`Brugerens score er: ${endeligScore}`); } visScore(100); // Output: Brugerens score er: 100 visScore(0); // Output: Brugerens score er: Ingen score angivet (FEJL!) visScore(null); // Output: Brugerens score er: Ingen score angivet

Som det ses, fejler funktionen, når den modtager `0` som input, fordi `0` er en falsy værdi. Hvis vi erstatter `||` med `??`, løses problemet elegant:

function visScoreKorrekt(score) { const endeligScore = score ?? 'Ingen score angivet'; console.log(`Brugerens score er: ${endeligScore}`); } visScoreKorrekt(100); // Output: Brugerens score er: 100 visScoreKorrekt(0); // Output: Brugerens score er: 0 (KORREKT!) visScoreKorrekt(null); // Output: Brugerens score er: Ingen score angivet

Praktiske Anvendelsesscenarier

Nullish Coalescing-operatoren er yderst nyttig i mange dagligdags programmeringsopgaver.

Håndtering af Objekt-egenskaber

Når du arbejder med objekter, især dem der kommer fra en API, er det almindeligt, at visse egenskaber mangler. `??`-operatoren er perfekt til at tildele standardværdier på en sikker måde.

const produkt = { navn: "Bærbar computer", pris: 8000, farve: "Sølv", lagerantal: 0 }; let produktNavn = produkt.navn ?? "Unavngivet produkt"; // navn er 'Bærbar computer' let produktBrand = produkt.brand ?? "Ukendt mærke"; // brand er undefined, så 'Ukendt mærke' tildeles let produktLager = produkt.lagerantal ?? 10; // lagerantal er 0 (ikke nullish), så 0 tildeles console.log(produktNavn); // Output: Bærbar computer console.log(produktBrand); // Output: Ukendt mærke console.log(produktLager); // Output: 0

Kombination med Optional Chaining (`?.`)

En af de mest kraftfulde kombinationer i moderne JavaScript er at bruge `??` sammen med Optional Chaining-operatoren (`?.`). Optional Chaining tillader dig at læse værdien af en egenskab dybt inde i en kæde af objekter uden at skulle tjekke eksplicit, om hver reference i kæden er gyldig.

Hvis en reference i kæden er `null` eller `undefined`, stopper udtrykket og returnerer `undefined`. Her kan `??` så træde til og levere en pæn standardværdi.

const bruger = { id: 123, profil: { navn: "Alice" // Ingen adresse defineret } }; // Uden optional chaining og nullish coalescing (den gamle måde) const byGammel = bruger && bruger.profil && bruger.profil.adresse && bruger.profil.adresse.by ? bruger.profil.adresse.by: "Ukendt by"; // Med den nye, elegante syntaks const byNy = bruger.profil?.adresse?.by ?? "Ukendt by"; console.log(byNy); // Output: Ukendt by

Denne kombination gør koden dramatisk kortere, mere læselig og mindre udsat for fejl som `TypeError: Cannot read properties of undefined`.

Forrang og Kombination med Andre Operatorer

Det er vigtigt at være opmærksom på operatorforrang. Nullish Coalescing-operatoren har den femtelaveste forrang, lige under `||` og lige over den betingede (ternære) operator (`?:`).

En meget vigtig regel er, at du ikke kan kombinere `??` direkte med OG (`&&`) eller ELLER (`||`) operatorerne uden at bruge parenteser. Hvis du forsøger, vil JavaScript kaste en `SyntaxError`. Dette er en bevidst designbeslutning for at forhindre forvirring og potentielle fejl, da udviklere måske ikke er sikre på, hvordan udtrykket evalueres.

// Disse vil kaste en SyntaxError let fejl1 = true && undefined ?? "foo"; let fejl2 = null || undefined ?? "foo"; // For at løse dette, skal du eksplicit angive forrang med parenteser let korrekt1 = (true && undefined) ?? "foo"; // (undefined) ?? "foo" -> "foo" let korrekt2 = (null || undefined) ?? "foo"; // (undefined) ?? "foo" -> "foo" let korrekt3 = null || (undefined ?? "foo"); // null || ("foo") -> "foo"

Ofte Stillede Spørgsmål (FAQ)

Hvornår præcist skal jeg vælge `??` over `||`?

Brug `??` (Nullish Coalescing), når du har brug for at tildele en standardværdi *kun* i tilfælde af `null` eller `undefined`. Dette er det rigtige valg, hvis falsy værdier som `0`, `""` (tom streng) eller `false` er gyldige og meningsfulde data i din applikation. Brug `||` (Logisk ELLER), hvis du bevidst ønsker at erstatte *enhver* falsy værdi (inklusive `0`, `""`, `false` osv.) med en standardværdi.

Hvad betyder "short-circuiting" for `??`?

Ligesom `&&` og `||`, bruger `??` "short-circuiting". Det betyder, at den højre operand kun evalueres, hvis den venstre operand er `null` eller `undefined`. Hvis den venstre operand er en gyldig værdi, bliver udtrykket på højre side aldrig kørt. Dette er en vigtig optimering, især hvis den højre operand er et funktionskald eller en kompleks beregning.

function dyrOperation() { console.log("Denne funktion blev kaldt!"); return "Resultat fra dyr operation"; } let værdi1 = "En gyldig værdi" ?? dyrOperation(); // 'dyrOperation' kaldes aldrig let værdi2 = null ?? dyrOperation(); // 'dyrOperation' kaldes, og loggen vises

Er `??` understøttet i alle browsere?

Nullish Coalescing Operatoren blev en del af ECMAScript-standarden i 2020. Den er understøttet i alle moderne browsere, herunder Chrome 80+, Firefox 72+, Safari 13.1+ og Edge 80+. Hvis du har brug for at understøtte ældre browsere som Internet Explorer, skal du bruge en transpiler som Babel til at konvertere den moderne syntaks til ældre, kompatibel JavaScript-kode.

Konklusion

Nullish Coalescing Operatoren (`??`) er en værdifuld tilføjelse til JavaScript-sproget. Den tilbyder en præcis og sikker løsning til at håndtere `null` og `undefined` værdier, hvilket resulterer i renere og mere forudsigelig kode. Ved at forstå dens subtile, men afgørende forskel fra den logiske ELLER-operator (`||`), kan udviklere undgå almindelige faldgruber forbundet med falsy værdier og skrive mere robust software. Når den kombineres med funktioner som Optional Chaining, bliver den et endnu mere kraftfuldt værktøj i den moderne udviklers værktøjskasse. Begynd at eksperimentere med `??` i dine projekter i dag og oplev, hvordan det kan forenkle din betingede logik og forbedre din kodebase.