TypeScript Academy · Lektion

Nullish coalescing med ??

Ange reservvärden endast för null och undefined, inte för alla falsy-värden.

Lektion 2 av 413 steg

Nullish coalescing med ?? är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Operatorn för nullish coalescing

Operatorn ?? returnerar sitt högra operandvärde endast när det vänstra operandvärdet är null eller undefined. Annars returnerar den det vänstra värdet. Det är det exakta sättet att ange standardvärden.

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

Endast nullish-värden utlöser reservvärdet

Det viktiga ordet är nullish: endast null och undefined gör att det högra operandvärdet används. Alla andra värden – även falsy-värden – passerar oförändrade.

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

Problemet med ||

Det logiska OR-uttrycket || använder reservvärdet för alla falsy-värden: 0, '', false och NaN, liksom nullish-värden. Det leder ofta till buggar när 0 eller en tom sträng är giltiga indata.

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

Gör standardvärden rätt

Använd ?? när noll, en tom sträng eller false är giltiga värden som ni vill behålla. Reservera || för fall där alla falsy-värden verkligen ska ersättas med ett reservvärde.

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

?? med funktionsparametrar

Ett vanligt mönster är att ange ett standardvärde för en valfri parameter när undefined skickas in, samtidigt som meningsfulla falsy-värden bevaras.

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

Resultattypen för ??

Typen för a ?? b tar bort null | undefined från typen för a och bildar en union med typen för b. Om a är string | null och b är string blir resultatet string.

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

Kedja standardvärden

Ni kan kedja ?? för att prova flera källor i ordning och gå vidare till nästa när ett värde är nullish. Det första värdet som inte är nullish vinner.

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

?? och operatorprioritet

Ni kan inte blanda ?? med || eller && utan parenteser – TypeScript kräver det för att undvika tvetydighet. Gruppera alltid uttrycken tydligt.

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

Skilj noll från ett saknat värde

Ett vanligt behov i verkliga program är att en temperatur, poäng eller ett saldo på 0 är giltiga data, medan undefined betyder ”inte angivet”. ?? håller dessa fall åtskilda; || blandar ihop dem.

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

?? med objektegenskaper

Att läsa en valfri egenskap och ange ett standardvärde är den vanligaste användningen av ??. Det passar naturligt ihop med optional chaining, som ni kombinerar med det i nästa lektion.

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

När ska ni välja vilket

Beslutsregel: om 0, '' eller false är giltiga värden som måste bevaras, använder ni ??. Om ni verkligen vill ersätta alla falsy-värden använder ni ||. Buggar med standardvärden uppstår nästan alltid när man av vana väljer ||.

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

Snabbtest

Testa er förståelse av nullish coalescing.

Besvara frågan i den interaktiva lektionen

Sammanfattning: Nullish coalescing

Ni har lärt er att ??:

Returnerar reservvärdet endast när vänstersidan är null eller undefined.
Bevarar giltiga falsy-värden som 0, '' och false — till skillnad från ||.
Tar bort null | undefined från resultattypen.
Kräver parenteser när det blandas med || eller &&.

Nästa steg är att kombinera ?. och ??.

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

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 101
Lektioner: 352

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Nullish coalescing med ??” gratis?

Ja – hela texten till ”Nullish coalescing med ??” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Nullish coalescing med ??”?

Ange reservvärden endast för null och undefined, inte för alla falsy-värden. Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Nullish coalescing med ??”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till TypeScript Academy