TypeScript Academy · Les

Nullish coalescing met ??

Bied alleen alternatieve waarden voor null en undefined, niet voor alle falsy waarden

Les 2 van 413 stappen

Nullish coalescing met ?? is een gratis TypeScript Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject TypeScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus TypeScript Academy bevat in totaal 4 lessen.

De operator voor nullachtige samenvoeging

De operator ?? geeft de rechterkant alleen terug wanneer de linkerkant null of undefined is. Anders geeft de operator de waarde aan de linkerkant terug. Dit is de precieze manier om standaardwaarden op te geven.

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

Alleen nullachtige waarden activeren de terugval

Het sleutelwoord is nullachtig: alleen null en undefined zorgen ervoor dat de rechterkant wordt gebruikt. Elke andere waarde — ook waarden die als onwaar worden beschouwd — wordt ongewijzigd doorgegeven.

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

Het probleem met ||

De logische OF-operator || gebruikt de terugvalwaarde voor elke waarde die als onwaar wordt beschouwd: 0, '', false, NaN en ook nullachtige waarden. Dat veroorzaakt vaak fouten wanneer 0 of een lege tekenreeks geldige invoer is.

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

Standaardwaarden op de juiste manier instellen

Gebruik ?? wanneer nul, een lege tekenreeks of onwaar geldige waarden zijn die je wilt behouden. Gebruik || alleen wanneer werkelijk elke waarde die als onwaar wordt beschouwd moet terugvallen.

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

?? met functieparameters

Een veelgebruikt patroon is een standaardwaarde opgeven voor een optionele parameter wanneer undefined wordt doorgegeven, terwijl betekenisvolle waarden die als onwaar worden beschouwd behouden blijven.

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

Het resultaatstype van ??

Het type van a ?? b verwijdert null | undefined uit het type van a en voegt het type van b via een unie toe. Als a string | null is en b string, is het resultaat string.

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

Standaardwaarden aan elkaar koppelen

Je kunt ?? aan elkaar koppelen om meerdere bronnen op volgorde te proberen en naar de volgende door te gaan wanneer een waarde nullachtig is. De eerste niet-nullachtige waarde wint.

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

?? en voorrang

Je kunt ?? niet zonder haakjes combineren met || of && — TypeScript vereist haakjes om dubbelzinnigheid te voorkomen. Groepeer de expressies altijd expliciet.

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

Nul onderscheiden van ontbrekend

Een veelvoorkomende behoefte uit de praktijk: een temperatuur, score of saldo van 0 is geldige informatie, terwijl undefined betekent: 'niet opgegeven'. Met ?? houd je deze gevallen gescheiden; met || worden ze samengevoegd.

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

?? met objecteigenschappen

Een optionele eigenschap lezen en er een standaardwaarde aan geven is het alledaagse gebruik van ??. Deze operator werkt natuurlijk samen met optionele ketening, die je in de volgende les combineert.

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

Wanneer je welke kiest

Beslisregel: als 0, '' of false geldige waarden zijn die je moet behouden, gebruik je ??. Als je werkelijk elke waarde die als onwaar wordt beschouwd wilt vervangen, gebruik je ||. Fouten met standaardwaarden ontstaan vrijwel altijd doordat je uit gewoonte naar || grijpt.

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

Korte test

Test je begrip van nullish coalescing.

Beantwoord dit in de interactieve les

Herhaling: nullish coalescing

Je hebt geleerd dat ??:

De terugvalwaarde alleen teruggeeft wanneer de linkerkant null of undefined is.
Geldige falsy-waarden zoals 0, '' en false behoudt — in tegenstelling tot ||.
null | undefined uit het resultaattype verwijdert.
Haakjes vereist wanneer het wordt gecombineerd met || of &&.

Vervolgens combineren we ?. en ??.

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

Gratis beginnen

Leer TypeScript met een AI-tutor — gratis

Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.

Cursussen: 101
Lessen: 352

Gratis beginnen met leren Bekijk de volledige cursus

Veelgestelde vragen

Is de les “Nullish coalescing met ??” gratis?

Ja — de volledige tekst van “Nullish coalescing met ??” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus TypeScript Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus TypeScript Academy bevat in totaal 4 lessen.

Wat leer ik in “Nullish coalescing met ??”?

Bied alleen alternatieve waarden voor null en undefined, niet voor alle falsy waarden Je oefent met TypeScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.

Heb ik ervaring nodig om met TypeScript Academy te beginnen?

Ervaring vooraf is niet nodig. TypeScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.

Hoe lang duurt de les “Nullish coalescing met ??”?

De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.

Kan ik code schrijven en uitvoeren in deze les over TypeScript Academy?

Ja. Elke les over TypeScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.

Alle lessen in deze cursus

← Terug naar TypeScript Academy