Null and undefined types in Typescript - Step-by-Step Execution

Concept Flow - Null and undefined types

Declare variable

↓

Assign undefined?

Yes→Value is undefined

↓

Use variable

↓

Assign null?

Yes→Value is null

↓

Use variable

↓

Assign other value

This flow shows how a variable can be declared and assigned either undefined, null, or another value, and then used.

Execution Sample

Typescript

let a: number | null | undefined;
a = undefined;
a = null;
a = 5;

This code declares a variable that can hold a number, null, or undefined, then assigns these values step-by-step.

Execution Table

Step	Code executed	Variable 'a' value	Type of 'a'	Notes
1	let a: number | null | undefined;	undefined	undefined	Declared but not assigned, default is undefined
2	a = undefined;	undefined	undefined	Explicitly assigned undefined
3	a = null;	null	object	Assigned null value
4	a = 5;	5	number	Assigned number value
5	End of code	5	number	Final value is 5

💡 Code ends after assigning 5 to 'a'

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
a	undefined	undefined	null	5	5

Key Moments - 3 Insights

Why does 'a' start as undefined even though we didn't assign a value?

In TypeScript, declared variables without an initial value are undefined by default, as shown in execution_table step 1.

Can 'a' hold both null and undefined at the same time?

No, 'a' can hold either null or undefined or a number at a time, but not both simultaneously, as seen in steps 2 and 3.

Why do we need to specify 'number | null | undefined' for 'a'?

Because TypeScript is strict about types, we must explicitly allow null and undefined if we want 'a' to hold those values, shown in the declaration at step 1.

Visual Quiz - 3 Questions

Look at the execution_table at step 3, what is the value and type of 'a'?

A Value: null, Type: null

B Value: undefined, Type: undefined

C Value: 5, Type: number

D Value: null, Type: undefined

💡 Hint

Check the 'Variable 'a' value' and 'Type of 'a'' columns at step 3 in execution_table.

At which step does 'a' change from undefined to a number?

A Step 2

B Step 3

C Step 4

D Step 1

💡 Hint

Look at the 'Variable 'a' value' column in execution_table and find when it becomes 5.

If we remove '| null | undefined' from the declaration, what would happen when assigning null or undefined?

A No error, assignments work fine

B Error, because 'a' can only be number

C Variable 'a' becomes any type

D Variable 'a' defaults to null

💡 Hint

Recall the declaration in execution_table step 1 and TypeScript's strict typing rules.

Concept Snapshot

TypeScript variables can hold null or undefined only if declared so.
Declare with union types like number | null | undefined.
Variables start as undefined if not assigned.
Assigning null or undefined requires explicit type allowance.
Use these types to handle missing or empty values safely.

Full Transcript

This visual execution shows how a TypeScript variable declared as number | null | undefined changes its value step-by-step. Initially, the variable 'a' is declared without assignment, so it is undefined. Then it is explicitly assigned undefined, then null, and finally a number 5. The variable tracker shows these changes clearly. Key moments explain why variables start as undefined, why they cannot hold null and undefined simultaneously, and why explicit union types are needed. The quiz tests understanding of variable values and types at each step and the importance of type declarations.