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.

Practice

1. What does null represent in TypeScript?

easy

A. A variable that has not been declared

B. A variable that holds a number zero

C. A variable that is still loading

D. A variable that has no value assigned

Solution

1. Step 1: Understand the meaning of null

   null means a variable explicitly has no value.

2. Step 2: Compare with other options

   The incorrect options describe different states or values, not null.

3. Final Answer:

   A variable that has no value assigned -> Option D

4. Quick Check:

   null means no value [OK]

Hint: Remember: null means no value assigned [OK]

Common Mistakes:

• Confusing null with undefined
• Thinking null means variable is undeclared
• Assuming null means zero or empty string

2. Which of the following is the correct way to declare a variable that can hold a string or null in TypeScript?

easy

A. let name: string | null;

B. let name: string & null;

C. let name: string or null;

D. let name: string? null;

Solution

1. Step 1: Recall union type syntax

   In TypeScript, the pipe | is used to allow multiple types.

2. Step 2: Check each option

   let name: string | null; uses | correctly. The other options use invalid syntax.

3. Final Answer:

   let name: string | null; -> Option A

4. Quick Check:

   Union types use | symbol [OK]

Hint: Use | to combine types like string | null [OK]

Common Mistakes:

• Using & instead of | for union types
• Writing 'or' instead of |
• Using invalid syntax like ? null

3. What will be the output of this TypeScript code?

let value: number | undefined;
console.log(value);

medium

A. undefined

B. null

C. 0

D. Error: Variable not initialized

Solution

1. Step 1: Understand variable initialization

   The variable value is declared but not assigned, so it defaults to undefined.

2. Step 2: Check console.log output

   Logging value prints undefined because it has no assigned value.

3. Final Answer:

   undefined -> Option A

4. Quick Check:

   Unassigned variable = undefined [OK]

Hint: Uninitialized variables print undefined [OK]

Common Mistakes:

• Expecting null instead of undefined
• Assuming default is zero
• Thinking it causes an error

4. Identify the error in this TypeScript code:

let age: number;
age = null;

medium

A. No error, code is correct

B. Variable age is not declared

C. Cannot assign null to a variable of type number

D. Missing semicolon after declaration

Solution

1. Step 1: Check variable type and assignment

   age is declared as number only, so it cannot hold null.

2. Step 2: Understand TypeScript strict null checks

   By default, null is not assignable to number unless union type includes null.

3. Final Answer:

   Cannot assign null to a variable of type number -> Option C

4. Quick Check:

   Assigning null to number causes error [OK]

Hint: Add | null to allow null assignment [OK]

Common Mistakes:

• Ignoring TypeScript strict null checks
• Thinking null is allowed by default
• Confusing missing semicolon as error

5. How can you declare a function parameter in TypeScript that accepts either a string, null, or undefined?

hard

A. function greet(name?: string & null) { console.log(name); }

B. function greet(name: string | null | undefined) { console.log(name); }

C. function greet(name: string & null & undefined) { console.log(name); }

D. function greet(name: string | null?) { console.log(name); }

Solution

1. Step 1: Understand union types for parameters

   To accept multiple types, use | to combine them.

2. Step 2: Analyze each option

   function greet(name: string | null | undefined) { console.log(name); } correctly uses string | null | undefined. function greet(name: string & null & undefined) { console.log(name); } uses & which means intersection (not correct). function greet(name?: string & null) { console.log(name); } uses & which means intersection (not correct). function greet(name: string | null?) { console.log(name); } has invalid syntax.

3. Final Answer:

   function greet(name: string | null | undefined) { console.log(name); } -> Option B

4. Quick Check:

   Use | to allow multiple types in parameters [OK]

Hint: Use | to combine string, null, and undefined types [OK]

Common Mistakes:

• Using & instead of | for union types
• Confusing optional parameter with undefined union
• Writing invalid syntax like null?