Safe Data Access: ?. and ??

Read deeply nested or possibly-missing data without crashing using optional chaining (?.), and supply clean fallbacks with nullish coalescing (??).

Step 1 of 3

Optional chaining: don't crash on missing data

Real data — especially from APIs — is messy. A field you expect might be missing. Reaching into it the normal way throws an error and breaks the page:

user.profile.avatar   // 💥 if profile is undefined: "Cannot read properties of undefined"

Optional chaining (?.) makes the access safe. If anything before it is null or undefined, the whole expression simply returns undefined instead of throwing:

user?.profile?.avatar   // undefined, no crash

This is everywhere in React apps, where you render data that may still be loading or partially filled. One stray ?. is the difference between a graceful blank and a white screen of death.

Think of it this way: ?. is like checking if a door exists before walking through it. Without it, you stride confidently toward a doorway that isn't there and faceplant (the crash). With it, you peek first — no door, no problem, you just stop.

Web Standard

?. short-circuits: the moment something is null/undefined, it stops and yields undefined. It works for properties (a?.b), array access (list?.[0]), and even method calls (obj.method?.()).

Learn more on MDN

MDN — Optional chaining (?.)

JAVASCRIPTREAD ONLY

CONSOLE

Click "Run" to execute your code...