JavaScript lesson · 17 min

JavaScript Optional Chaining

Safely read nested data with ?. and provide fallback values with ?? when something is missing.

Code runs locally in your browser

What you will practice

Read nested object properties safely.
Understand why missing data causes errors.
Use fallback values with the nullish coalescing operator.

What this means

Real data is often incomplete. A user may not have a profile photo yet, an API response may omit a field, or settings may not exist until a user changes them.

Optional chaining, written as `?.`, lets JavaScript stop safely when a value is `null` or `undefined` instead of crashing while trying to read deeper.

The nullish coalescing operator, written as `??`, lets you provide a fallback only when the left side is `null` or `undefined`.

If this is your first time seeing this

Optional chaining is a safety check for reading data that may not exist.

Read `user.settings?.theme` as: if `settings` exists, read `theme`; if not, stop safely.

Mini glossary

Optional chaining: The `?.` operator that safely reads a property only when the previous value exists.
nullish: A value that is either `null` or `undefined`.
fallback: A safe value used when real data is missing.

Example from everyday life

Optional chaining is like asking a receptionist for a room number only if the guest actually has a booking. If there is no booking, you stop and use a safe fallback instead of walking into random rooms.

How it works step by step

The code creates a `user` object with a nested `profile` object.
`user.profile?.name` safely reads the profile name.
`user.profile?.city ?? "Unknown city"` uses a fallback because the city is missing.
`user.settings?.theme ?? "light"` does not crash even though `settings` is `null`.

Where you will use this

A profile page shows a default avatar when the user has not uploaded one.
A dashboard reads optional API fields without breaking the whole page.
A settings screen uses default values until a user saves real preferences.

Before you run the code

Optional chaining is not a replacement for understanding your data. It is a safe way to read data that may legitimately be missing.

Use it when missing data is normal. If missing data means a serious bug, it may be better to show an explicit error.

Common beginner mistakes

Using optional chaining everywhere instead of understanding which data is required.
Confusing `??` with `||`. They handle some false-like values differently.
Assuming optional chaining fixes bad data. It only prevents a crash while reading missing data.

JavaScript editor

const user = {
  profile: {
    name: "Mira"
  },
  settings: null
};

const name = user.profile?.name ?? "Guest";
const city = user.profile?.city ?? "Unknown city";
const theme = user.settings?.theme ?? "light";

console.log(`Name: ${name}`);
console.log(`City: ${city}`);
console.log(`Theme: ${theme}`);

Console output

Run the code to see console output here.

Exercise checks0 of 2 checks passed.

WaitingReads the existing nested name

WaitingUses fallback values for missing data

Code runs locally in a temporary browser worker with a timeout. It is not sent to Lumio analytics or executed on the server.

Try changing this next

Add `city: "Berlin"` to the profile and see the fallback disappear.
Change `settings` from `null` to `{ theme: "dark" }`.
Remove `?? "Guest"` and see how missing data prints.

Previous lesson Next lesson