Master JavaScript Optional Chaining and Nullish Coalescing for Cleaner Code

As front‑end developers we constantly deal with data checks, default values, and deep object access, which often lead to verbose if‑else statements.

🎯 Optional‑chaining operator (?.) – Say goodbye to deep‑nesting nightmares

Traditional writing pain points

Remember those painful deep object accesses?

<code>// 😩 Traditional way: nested checks
if (user && user.profile && user.profile.address && user.profile.address.city) {
  console.log(user.profile.address.city);
}

// 😩 Or using try‑catch
try {
  const city = user.profile.address.city;
  console.log(city);
} catch (error) {
  console.log('Data does not exist');
}</code>

Elegant solution with optional chaining

<code>// 😍 Using optional chaining: one line!
console.log(user?.profile?.address?.city);

// If any level is null or undefined, it returns undefined
// No error is thrown!</code>

🎯 Nullish coalescing operator (??) – Smart default value setting

Difference from the || operator

This is a common source of confusion for many developers:

📊 Code comparison

Let’s compare the code before and after using these operators:

Traditional writing:

Modern writing:

🎨 Best practices

1. Use moderately, avoid over‑chaining

2. Combine with destructuring

<code>const { 
  name = '默认名称', 
  age = 0, 
  email 
} = user?.profile ?? {};

// Equivalent to
const name = user?.profile?.name ?? '默认名称';
const age = user?.profile?.age ?? 0;
const email = user?.profile?.email;</code>

These two "cute" operators make JavaScript code more concise and safe: the optional‑chaining operator (?.) solves deep object access problems, while the nullish‑coalescing operator (??) provides precise default value handling.