Optional chaining with types in Typescript - Step-by-Step Execution

Concept Flow - Optional chaining with types

Start with object

↓

Check if property exists?

No→Return undefined

Yes↓

Access property value

↓

If next property, repeat check

↓

Return final value or undefined

Optional chaining checks each property step-by-step. If any property is missing, it returns undefined instead of error.

Execution Sample

Typescript

const user = { name: "Alice", address: { city: "Wonderland" } };
const city = user?.address?.city;
const zip = user?.address?.zip?.code;

This code safely accesses nested properties using optional chaining, avoiding errors if properties are missing.

Execution Table

Step	Expression	Check	Result	Value
1	user?.address	user exists?	Yes	{"city":"Wonderland"}
2	user?.address?.city	address exists?	Yes	"Wonderland"
3	user?.address?.zip	address.zip exists?	No	undefined
4	user?.address?.zip?.code	zip exists?	No	undefined

💡 Optional chaining stops and returns undefined when a property does not exist.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 4
user	{"name":"Alice","address":{"city":"Wonderland"}}	{"name":"Alice","address":{"city":"Wonderland"}}	{"name":"Alice","address":{"city":"Wonderland"}}	{"name":"Alice","address":{"city":"Wonderland"}}	{"name":"Alice","address":{"city":"Wonderland"}}
city	undefined	undefined	"Wonderland"	"Wonderland"	"Wonderland"
zip	undefined	undefined	undefined	undefined	undefined

Key Moments - 2 Insights

Why does accessing user?.address?.zip?.code not cause an error even though zip is missing?

Because optional chaining checks each property step-by-step and returns undefined immediately when a property is missing, preventing runtime errors. See execution_table rows 3 and 4.

What value does city get if user.address.city exists?

It gets the actual value "Wonderland" because all properties exist. See execution_table row 2.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of user?.address?.city at step 2?

A null

B undefined

C "Wonderland"

D Error

💡 Hint

Check the 'Value' column at step 2 in the execution_table.

At which step does optional chaining return undefined because a property is missing?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Look for the first 'No' in the 'Check' column in execution_table.

If user.address.zip was defined as { code: 12345 }, what would user?.address?.zip?.code be at step 4?

A undefined

B 12345

C null

D Error

💡 Hint

Think about how optional chaining accesses nested properties when they exist.

Concept Snapshot

Optional chaining syntax: obj?.prop?.subprop
Checks each property safely.
Returns undefined if any property is missing.
Prevents runtime errors from accessing undefined.
Works well with nested objects and optional properties.

Full Transcript

Optional chaining in TypeScript lets you safely access nested properties without errors. It checks each property step-by-step. If a property is missing, it returns undefined immediately instead of throwing an error. For example, user?.address?.city returns the city if address exists, or undefined if not. This helps avoid crashes when some data might be missing. The execution table shows how each step checks for property existence and returns values or undefined accordingly.