Optional chaining

Learn null-safe access with ?.

Optional chaining

When accessing a nested property of an object you can manage the risk of intermediate values being null or undefined with the optional chaining operator ?.. user?.address?.city returns undefined instead of throwing when user or address is null/undefined.

The traditional equivalent is user && user.address && user.address.city; this is long and error-prone. With ?. you get the same result shortly and safely. It is especially useful for API responses where some fields may be missing.

null vs undefined

In JavaScript null means an intentional "no value" while undefined means "not defined". A variable that has not been assigned yet is undefined; a programmer writes null to leave it empty on purpose.

Optional chaining handles both safely: in x?.y, whether x is null or undefined, the result is undefined. No error is thrown. Thanks to this you can write safe code without try/catch or long && chains when reaching nested data.

Exercise Reach the user address

The user variable holds null. Declare a variable city and assign the result of user?.address?.city to it. Then print city with console.log. The output on a single line must be undefined.

Show example solution

const user = null;
const city = user?.address?.city;
console.log(city);

Test yourself

Write the optional chaining

const city = user____address?.city;

Show answer

const city = user?.address?.city;

What is the result of null?.city?
```
null?.city
```
- "city"
- true
- null.city error
- undefined
Show answer

undefined — ?. does not throw on null; it returns undefined.
Match each operator to its meaning

?.

Null-safe access
.

Ordinary access
??

Nullish coalescing
||

Logical or

Next lesson: Summary - Conditionals

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies