TypeScript Academy · leksjon

Nullish coalescing med ??

Bruk reserveverdier bare for null og undefined, ikke for alle falsy-verdier.

Leksjon 2 av 413 trinn

Nullish coalescing med ?? er en gratis leksjon i TypeScript Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i TypeScript Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Operatoren for nullish coalescing

Operatoren ?? returnerer verdien på høyre side bare når venstresiden er null eller undefined. Ellers returnerer den verdien på venstresiden. Dette er den presise måten å angi standardverdier på.

const name: string | null = null;
const display = name ?? 'Guest';
console.log(display); // 'Guest'

Bare nullish-verdier utløser reserveverdien

Nøkkelordet er nullish: bare null og undefined fører til at høyresiden brukes. Alle andre verdier — også falsy-verdier — sendes videre uendret.

console.log(0 ?? 99);       // 0
console.log('' ?? 'x');     // ''
console.log(false ?? true); // false
console.log(null ?? 'def'); // 'def'

Problemet med ||

Den logiske OR-operatoren || bruker reserveverdien for alle falsy-verdier: 0, '', false, NaN, i tillegg til nullish-verdier. Det fører ofte til feil når 0 eller en tom streng er gyldige inndata.

const count = 0;
console.log(count || 10); // 10 — wrong! 0 is a valid count
console.log(count ?? 10); // 0  — correct

Angi standardverdier riktig

Bruk ?? når null, tom streng eller false er legitime verdier du vil beholde. Reserver || for tilfeller der alle falsy-verdier faktisk skal erstattes med en reserveverdi.

function volume(v: number | undefined): number {
  return v ?? 50; // 0 stays 0, undefined becomes 50
}
console.log(volume(0), volume(undefined));

?? med funksjonsparametere

Et vanlig mønster er å angi en standardverdi for en valgfri parameter når undefined sendes inn, samtidig som meningsfulle falsy-inndata bevares.

function greet(name?: string): string {
  return 'Hello, ' + (name ?? 'friend');
}
console.log(greet('Ada'), greet());

Resultattypen til ??

Typen til a ?? b fjerner null | undefined fra typen til a og danner en union med typen til b. Hvis a er string | null og b er string, blir resultatet string.

const maybe: string | null = null;
const sure: string = maybe ?? 'default';
console.log(sure.toUpperCase());

Kjed sammen standardverdier

Du kan kjede ?? for å prøve flere kilder i rekkefølge og gå videre til den neste når en verdi er nullish. Den første verdien som ikke er nullish, vinner.

const fromEnv: string | undefined = undefined;
const fromConfig: string | null = null;
const value = fromEnv ?? fromConfig ?? 'hardcoded';
console.log(value);

?? og operatorprioritet

Du kan ikke blande ?? med || eller && uten parenteser — TypeScript krever dette for å unngå tvetydighet. Gruppér alltid uttrykkene eksplisitt.

const a: number | null = null;
const b = true;
// const x = a ?? 5 || 10; // Error without parens
const x = (a ?? 5) || 10;
console.log(x);

Skill mellom null og manglende verdi

Et vanlig behov i praksis er at en temperatur, poengsum eller saldo på 0 er gyldige data, mens undefined betyr «ikke angitt». ?? holder disse tilfellene adskilt; || blander dem sammen.

function format(temp: number | undefined): string {
  return (temp ?? 'N/A') + ' degrees';
}
console.log(format(0), format(undefined));

?? med objektegenskaper

Å lese en valgfri egenskap og angi en standardverdi er den vanligste bruken av ??. Det passer naturlig sammen med optional chaining, som du skal kombinere med dette i neste leksjon.

type Opts = { retries?: number };
function run(o: Opts): number {
  return o.retries ?? 3;
}
console.log(run({ retries: 0 }), run({}));

Når bør du velge hva?

Beslutningsregel: Hvis 0, '' eller false er gyldige verdier som må bevares, bruker du ??. Hvis du faktisk vil erstatte alle falsy-verdier, bruker du ||. Feil med standardverdier skyldes nesten alltid at man bruker || av gammel vane.

const username = '';
console.log(username || 'anon'); // 'anon' — empty replaced
console.log(username ?? 'anon'); // '' — empty kept

Kort sjekk

Test forståelsen din av nullish coalescing.

Besvar den i den interaktive leksjonen

Oppsummering: Nullish Coalescing

Du har lært at ??:

Returnerer reserveverdien bare når venstresiden er null eller undefined.
Bevarer gyldige falsy-verdier som 0, '' og false — i motsetning til ||.
Fjerner null | undefined fra resultattypen.
Krever parenteser når det blandes med || eller &&.

Deretter kombinerer vi ?. og ??.

function port(v: number | undefined): number {
  return v ?? 8080;
}
console.log(port(0), port(undefined));

Gratis å komme i gang

Lær deg TypeScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 101
Leksjoner: 352

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Nullish coalescing med ??» gratis?

Ja – hele teksten i «Nullish coalescing med ??» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av TypeScript Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i TypeScript Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Nullish coalescing med ??»?

Bruk reserveverdier bare for null og undefined, ikke for alle falsy-verdier. Du øver på TypeScript Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med TypeScript Academy?

Ingen tidligere erfaring er nødvendig. TypeScript Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Nullish coalescing med ??»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne TypeScript Academy-leksjonen?

Ja. Alle TypeScript Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til TypeScript Academy