sr✳SHUBHAM RAJFRONTEND ENGINEER
FULL TECHNICAL GUIDEIntermediate3 min read

How does optional chaining work?

Optional chaining stops property access or a call when its left operand is null or undefined.

JavaScript#objects#syntax
THE ANSWER / PLAIN ENGLISH

The idea to remember.

Optional chaining stops property access or a call when its left operand is null or undefined. It returns undefined rather than throwing, but does not replace validation of required data.

From first example to real project.

Start with the smallest working idea, examine a more detailed example, then look at a real application pattern. Adapt dependencies, error handling and data models to your project.

Basic: understand this

01 / BEGINNER

The call site determines this for ordinary functions.

JAVASCRIPT / EXAMPLE
const account = {
  balance: 10,
  show() { return this.balance; }
};
console.log(account.show()); // 10

Intermediate: copy before changes

02 / INTERMEDIATE

Spread makes a shallow copy; nested objects still share references.

JAVASCRIPT / EXAMPLE
const user = { name: 'Ava', settings: { dark: false } };
const updated = { ...user, settings: { ...user.settings, dark: true } };

Real scenario: normalize API data

03 / REAL SCENARIO

Make defaults explicit at an untrusted API boundary.

JAVASCRIPT / EXAMPLE
function normalizeUser(data) {
  return {
    id: String(data.id),
    name: typeof data.name === 'string' ? data.name : 'Guest'
  };
}

Try it in your own words.

Explain how does optional chaining work without looking at the code. Then modify the intermediate example, describe one trade-off and identify when the real-world pattern fits.

Keep learning here.

Explore more in-depth guides, exercises and related interview questions in this library.

Browse JavaScript study guides ↗
← Back to question library

Have something
in mind?

Start a conversation