Nullable Values and Safe Access

Nullish Coalescing

Nullish coalescing chooses a fallback only for null or undefined.

nullish coalescing The `??` operator keeps real values, but replaces `null` or `undefined` with a fallback.

Nullish Coalescing

displayName
coalescing.ts
Replay: real traced execution (multi-file project)
const displayName: string | undefined = undefined;
const fallbackName: string = "Guest";
const nameToShow: string = displayName ?? fallbackName;

console.log(`hello=${nameToShow}`);

const displayName: string | undefined = "Ada";
const fallbackName: string = "Guest";
const nameToShow: string = displayName ?? fallbackName;

console.log(`hello=${nameToShow}`);

const displayName: string | undefined = "";
const fallbackName: string = "Guest";
const nameToShow: string = displayName ?? fallbackName;

console.log(`hello=${nameToShow}`);

  1. displayName ← undefined, fallbackName ← Guest, nameToShow ← Guest

    1const displayName→ undefined: string | undefined = undefined;  //@displayName="Ada", ""2const fallbackName→ Guest: string = "Guest";3const nameToShow→ Guest: string = displayName→ undefined ?? fallbackNameGuest;45console.log(`hello=${nameToShowGuest}`);
    outputhello=Guest

  1. displayName ← Ada, fallbackName ← Guest, nameToShow ← Ada

    1const displayName→ Ada: string | undefined = "Ada";2const fallbackName→ Guest: string = "Guest";3const nameToShow→ Ada: string = displayName→ Ada ?? fallbackNameGuest;45console.log(`hello=${nameToShowAda}`);
    outputhello=Ada

  1. displayName ← (empty), fallbackName ← Guest, nameToShow ← (empty)

    1const displayName→ (empty): string | undefined = "";2const fallbackName→ Guest: string = "Guest";3const nameToShow→ (empty): string = displayName→ (empty) ?? fallbackNameGuest;45console.log(`hello=${nameToShow(empty)}`);
    outputhello=