Nullish coalescing with types in Typescript - Step-by-Step Execution

Concept Flow - Nullish coalescing with types

Evaluate left side

↓

Is value null or undefined?

No→Use left side value

Yes↓

Use right side value

↓

Result assigned with correct type

The code checks if the left value is null or undefined; if yes, it uses the right value instead, preserving type safety.

Execution Sample

Typescript

let a: string | null = null;
let b: string = "default";
let c = a ?? b;
console.log(c);

Assigns 'c' to 'a' if 'a' is not null/undefined; otherwise assigns 'b'. Then prints 'c'.

Execution Table

Step	Expression Evaluated	Value	Is Nullish?	Result Assigned to c
1	a	null	Yes	b ("default")
2	b	"default"	N/A	b ("default")
3	c = a ?? b	"default"	N/A	"default"
4	console.log(c)	prints "default"	N/A	N/A

💡 Execution ends after printing the value of c, which is "default" because a was null.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
a	null	null	null	null
b	"default"	"default"	"default"	"default"
c	undefined	undefined	"default"	"default"

Key Moments - 2 Insights

Why does 'c' get the value of 'b' instead of 'a'?

Because 'a' is null, which is considered nullish, so the nullish coalescing operator (??) chooses the right side 'b' as shown in execution_table step 1 and 3.

What if 'a' was an empty string ""? Would 'c' still get 'b'?

No, because an empty string is not null or undefined, so 'c' would get the empty string value of 'a'. The operator only checks for null or undefined, not falsy values.

Visual Quiz - 3 Questions

Look at the execution_table at step 1, what is the value of 'a' and is it nullish?

A "default", No

B null, Yes

C undefined, Yes

D "", No

💡 Hint

Check the 'Value' and 'Is Nullish?' columns in execution_table row 1.

At which step is the variable 'c' assigned its final value?

A Step 3

B Step 2

C Step 1

D Step 4

💡 Hint

Look for the assignment expression 'c = a ?? b' in execution_table.

If 'a' was "hello" instead of null, what would 'c' be after step 3?

A "default"

B null

C "hello"

D undefined

💡 Hint

Recall that ?? uses left value if it is not null or undefined, see key_moments explanation.

Concept Snapshot

Nullish coalescing (??) returns the left value if it is NOT null or undefined.
Otherwise, it returns the right value.
Useful for default values without overriding falsy values like 0 or "".
TypeScript infers the precise result type by excluding null/undefined from the left side's type and unioning with the right side's type.
Syntax: let result = value1 ?? value2;

Full Transcript

This example shows how the nullish coalescing operator (??) works in TypeScript with types. We start with variable 'a' which is null, and 'b' which is a string "default". When we assign 'c = a ?? b', the operator checks if 'a' is null or undefined. Since 'a' is null, it uses 'b' instead. The final value of 'c' is "default". TypeScript infers the type of 'c' as string, preserving type safety since the result cannot be null or undefined. The console.log prints "default". If 'a' was an empty string, 'c' would be that empty string, not 'b', because empty string is not nullish. This operator helps provide default values only when the left side is truly missing (null or undefined), unlike || which treats all falsy values the same.