Why Nullish coalescing with types in Typescript? - Purpose & Use Cases

The Big Idea

Discover how a tiny operator can save you from hours of confusing checks and bugs!

The Scenario

Imagine you have a form where users can enter their age, but sometimes they leave it blank or enter zero. You want to set a default age if nothing is provided. Without a special tool, you check each value manually, which is confusing and takes time.

The Problem

Manually checking if a value is null or undefined means writing many if-else statements. This is slow, easy to forget, and can cause bugs if you accidentally treat zero or empty strings as missing values.

The Solution

Nullish coalescing lets you quickly say: "If this value is null or undefined, use this default instead." It works perfectly with TypeScript types, making your code cleaner, safer, and easier to read.

Before vs After

✗ Before

const age = userAge !== null && userAge !== undefined ? userAge : 18;

✓ After

const age = userAge ?? 18;

What It Enables

It enables you to handle missing or empty values safely and simply, improving code clarity and reducing bugs.

Real Life Example

When loading user settings, you can use nullish coalescing to provide default values if the user hasn't set them yet, without accidentally overwriting valid zero or empty string values.

Key Takeaways

Nullish coalescing checks only for null or undefined, not other falsy values.

It simplifies default value assignment in TypeScript with type safety.

It helps avoid common bugs from manual null/undefined checks.