TypeScript Academy · Lektion

Nullish Coalescing mit ??

Stellen Sie Fallbacks nur für null und undefined bereit, nicht für alle falsy-Werte.

Nullish Coalescing mit ?? ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Der Nullish-Coalescing-Operator

Der Operator ?? gibt seine rechte Seite nur dann zurück, wenn die linke Seite null oder undefined ist. Andernfalls gibt er den Wert der linken Seite zurück. Damit lassen sich Standardwerte präzise angeben.

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

Nur nullish löst den Ersatzwert aus

Das Schlüsselwort ist nullish: Nur null und undefined führen dazu, dass die rechte Seite verwendet wird. Jeder andere Wert – auch falsy-Werte – wird unverändert übernommen.

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

Das Problem mit ||

Das logische Oder || verwendet den Ersatzwert bei jedem falsy-Wert: 0, '', false und NaN ebenso wie bei nullish-Werten. Das führt häufig zu Fehlern, wenn 0 oder eine leere Zeichenkette gültige Eingaben sind.

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

Standardwerte richtig setzen

Verwenden Sie ??, wenn null, eine leere Zeichenkette oder false gültige Werte sind, die Sie beibehalten möchten. Reservieren Sie || für Fälle, in denen tatsächlich jeder falsy-Wert durch den Ersatzwert ersetzt werden soll.

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

?? mit Funktionsparametern

Ein häufiges Muster besteht darin, für einen optionalen Parameter einen Standardwert bereitzustellen, wenn undefined übergeben wird, und gleichzeitig sinnvolle falsy-Eingaben beizubehalten.

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

Der Ergebnistyp von ??

Der Typ von a ?? b entfernt null | undefined aus dem Typ von a und vereinigt ihn mit dem Typ von b. Wenn a den Typ string | null und b den Typ string hat, ist das Ergebnis vom Typ string.

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

Standardwerte verketten

Sie können ?? verketten, um mehrere Quellen der Reihe nach zu versuchen. Wenn ein Wert nullish ist, wird mit der nächsten Quelle fortgefahren. Der erste nicht-nullish Wert wird verwendet.

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

?? und Vorrangregeln

Sie können ?? nicht ohne Klammern mit || oder && kombinieren – TypeScript verlangt Klammern, um Mehrdeutigkeiten zu vermeiden. Klammern Sie solche Ausdrücke immer ausdrücklich.

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

Null von fehlenden Werten unterscheiden

Ein häufiger Anwendungsfall aus der Praxis: Eine Temperatur, Punktzahl oder ein Kontostand von 0 ist ein gültiger Wert, während undefined bedeutet, dass kein Wert angegeben wurde. ?? hält diese Fälle auseinander, || setzt sie gleich.

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

?? mit Objekteigenschaften

Eine optionale Eigenschaft zu lesen und mit einem Standardwert zu versehen, ist der alltägliche Anwendungsfall von ??. Der Operator lässt sich natürlich mit Optional Chaining kombinieren, das Sie in der nächsten Lektion verwenden werden.

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

Die richtige Wahl treffen

Als Entscheidungsregel gilt: Wenn 0, '' oder false gültige Werte sind, die Sie erhalten müssen, verwenden Sie ??. Wenn tatsächlich jeder falsy-Wert ersetzt werden soll, verwenden Sie ||. Fehler bei Standardwerten entstehen fast immer dadurch, dass aus Gewohnheit zu || gegriffen wird.

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

Schnelltest

Testen Sie Ihr Verständnis von Nullish Coalescing.

Zusammenfassung: Nullish Coalescing

Sie haben gelernt, dass ??:

den Fallback nur zurückgibt, wenn die linke Seite null oder undefined ist.
gültige falsy-Werte wie 0, '' und false beibehält – anders als ||.
null | undefined aus dem Ergebnistyp entfernt.
Klammern erfordert, wenn es mit || oder && kombiniert wird.

Als Nächstes kombinieren wir ?. und ??.

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

Häufig gestellte Fragen

Ist die Lektion „Nullish Coalescing mit ??“ kostenlos?

Ja — der vollständige Text von „Nullish Coalescing mit ??“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Nullish Coalescing mit ??“?

Stellen Sie Fallbacks nur für null und undefined bereit, nicht für alle falsy-Werte. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 4.

Wie lange dauert die Lektion „Nullish Coalescing mit ??“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu TypeScript Academy