Nullish coalescing with types in Typescript

Introduction

Nullish coalescing helps you pick a default value when something is null or undefined. It makes your code safer and clearer.

When you want to give a default value if a variable might be null or undefined.

When reading user input that might be missing or empty.

When working with optional function parameters.

When you want to avoid errors from accessing null or undefined values.

When you want to keep your code simple and readable instead of using many if checks.

Syntax

Typescript

class Example {
  value: string | null | undefined;

  constructor(value: string | null | undefined) {
    this.value = value;
  }

  getValueOrDefault(): string {
    return this.value ?? "default";
  }
}

The ?? operator returns the right side if the left side is null or undefined.

This is different from || which returns the right side for any falsy value like "" or 0.

Examples

Here, value is null, so it returns the default string.

Typescript

const example1 = new Example(null);
console.log(example1.getValueOrDefault());

Here, value is undefined, so it also returns the default string.

Typescript

const example2 = new Example(undefined);
console.log(example2.getValueOrDefault());

Here, value is an empty string, which is NOT nullish, so it returns the empty string.

Typescript

const example3 = new Example("");
console.log(example3.getValueOrDefault());

Here, value is a normal string, so it returns that string.

Typescript

const example4 = new Example("hello");
console.log(example4.getValueOrDefault());

Sample Program

This program shows how the nullish coalescing operator ?? works with different types of input values. It prints the result for null, undefined, empty string, and a normal string.

Typescript

class Example {
  value: string | null | undefined;

  constructor(value: string | null | undefined) {
    this.value = value;
  }

  getValueOrDefault(): string {
    return this.value ?? "default";
  }
}

const exampleNull = new Example(null);
console.log("Null input:", exampleNull.getValueOrDefault());

const exampleUndefined = new Example(undefined);
console.log("Undefined input:", exampleUndefined.getValueOrDefault());

const exampleEmptyString = new Example("");
console.log("Empty string input:", exampleEmptyString.getValueOrDefault());

const exampleHello = new Example("hello");
console.log("Hello input:", exampleHello.getValueOrDefault());

Important Notes

Time complexity: O(1) because it just checks a value.

Space complexity: O(1) no extra memory is used.

Common mistake: Using || instead of ?? can cause unexpected results with falsy values like empty strings or zero.

Use nullish coalescing when you want to treat only null or undefined as missing, not other falsy values.

Summary

Nullish coalescing ?? returns the right value only if the left is null or undefined.

It helps provide safe default values without hiding falsy but valid values like empty strings.

Use it to write cleaner and safer TypeScript code when dealing with optional or missing values.