TypeScript Academy · Lesson

Optional Chaining with ?.

Safely access deeply nested properties that may be null.

Optional Chaining with ?. is a free TypeScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The Optional Chaining Operator

Optional chaining (?.) lets you safely access a property that might be on a null or undefined value. If the value is nullish, the whole expression short-circuits to undefined instead of throwing.

type User = { profile?: { bio?: string } };
const u: User = {};
const bio = u.profile?.bio;
console.log(bio); // undefined, no crash

Short-Circuiting on Nullish

When the operand before ?. is null or undefined, evaluation stops immediately and returns undefined. The rest of the chain is never executed.

const data: { value?: number } | null = null;
console.log(data?.value); // undefined, did not throw

Chaining Multiple Levels

You can place ?. at each uncertain step of a deep access. Any nullish link short-circuits the entire chain, protecting you from 'cannot read property of undefined' errors.

type Company = { ceo?: { contact?: { email?: string } } };
const c: Company = { ceo: {} };
console.log(c.ceo?.contact?.email); // undefined

The Result Type Includes undefined

Because the chain can yield undefined, TypeScript adds undefined to the result type. If the property type was string, the chained result is string | undefined.

type Settings = { theme?: { name: string } };
const s: Settings = { theme: { name: 'dark' } };
const name = s.theme?.name; // type: string | undefined
console.log(name);

Handling the undefined Result

Since the result may be undefined, you typically check it or provide a fallback. The type system reminds you to handle the missing case.

type Settings = { theme?: { name: string } };
const s: Settings = {};
const name = s.theme?.name;
if (name === undefined) console.log('using default');
else console.log(name);

Comparison With && Chains

Before ?., developers wrote long && chains: a && a.b && a.b.c. Optional chaining expresses the same intent far more concisely and reads top to bottom.

type A = { b?: { c?: number } };
const a: A = { b: { c: 5 } };
const oldWay = a && a.b && a.b.c;
const newWay = a?.b?.c;
console.log(oldWay, newWay);

Why ?. Is Better Than &&

The && approach treats any falsy value (0, '', false) as a stopping point, which can be a bug. Optional chaining stops only on null or undefined, which is usually what you want.

type Box = { count?: number };
const b: Box = { count: 0 };
console.log(b && b.count); // 0... but && stops on falsy in longer chains
console.log(b?.count); // 0, cleanly

Optional Chaining on Arrays of Objects

Optional chaining works through any property access. Combined with element access it safely reaches into nested arrays of objects.

type Team = { members?: Array<{ name: string }> };
const t: Team = { members: [{ name: 'Ada' }] };
console.log(t.members?.[0]?.name);

Short-Circuit Stops the Whole Expression

Once a chain short-circuits, even property accesses written after it (without ?.) are skipped. The entire expression evaluates to undefined at once.

type Deep = { a?: { b: { c: number } } };
const d: Deep = {};
// a is undefined, so b.c is never evaluated
console.log(d.a?.b.c); // undefined

Optional Chaining With Function Returns

You can chain off the result of a function call. If the function returns a nullish value, the following access short-circuits safely.

function findUser(): { name: string } | null {
  return null;
}
console.log(findUser()?.name); // undefined

A Practical Config Example

Optional chaining shines when reading partial config or API responses where nested fields may be absent. It keeps access readable and crash-free.

type Response = { user?: { address?: { city?: string } } };
const res: Response = { user: { address: {} } };
console.log(res.user?.address?.city ?? 'unknown city');

Quick Check

Test your understanding of optional chaining.

Recap: Optional Chaining

You learned that ?.:

Safely accesses properties on possibly null/undefined values.
Short-circuits the whole expression to undefined on a nullish link.
Adds undefined to the result type.
Improves on && chains by stopping only on nullish, not all falsy values.

Next, the nullish coalescing operator.

type Cfg = { db?: { host?: string } };
const c: Cfg = {};
console.log(c.db?.host);

Frequently asked questions

Is the “Optional Chaining with ?.” lesson free?

Yes — the full text of “Optional Chaining with ?.” is free to read here on the web, and the TypeScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Optional Chaining with ?.”?

Safely access deeply nested properties that may be null. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Optional Chaining with ?.” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to TypeScript Academy