DEV Community

Cover image for Optional Chaining and Nullish Coalescing
Shagun Mistry
Shagun Mistry

Posted on

Optional Chaining and Nullish Coalescing

Optional Chaining: The Graceful Accessor

Let’s say you have an object representing a user, and you want to access their address.

In the past, you might have done something like this:

const user = {
 name: "Alice",
 address: { street: "123 Main St" }
};

const street = user.address && user.address.street;

console.log('Street: ', street); // Output: 123 Main St
Enter fullscreen mode Exit fullscreen mode

But what happens if the user object doesn’t have an address property or the address object doesn’t have a street property?

You’d get an error!

Enter Optional Chaining!

This operator (?.) lets you access nested properties safely, returning undefined if any part of the chain is missing.

For example:

const user = {
 name: "Bob"
};

const street = user.address?.street;
console.log('Street: ', street); // Output: undefined
Enter fullscreen mode Exit fullscreen mode

See how much cleaner and concise the code is?

Nullish Coalescing

The Default Value Defender.

Now, let’s imagine you want to assign a default value to a variable if it’s null or undefined. Traditionally, you might use the OR operator (||). However, this can lead to unexpected behavior if the variable holds a "falsy" value like 0 or an empty string.

Why it's useful:

  • It simplifies code by replacing verbose if statements or ternary operators.
  • It focuses specifically on null and undefined, unlike the logical OR operator (||) which also treats falsy values (like 0 or empty strings) as "missing".
let userSettings = null; // Imagine this comes from an API or user input

// Without nullish coalescing:
let theme = userSettings !== null && userSettings !== undefined ? userSettings.theme : 'light';

// With nullish coalescing:
let theme = userSettings?.theme ?? 'light'; // If userSettings.theme is null or undefined, 'light' is used
Enter fullscreen mode Exit fullscreen mode

Key points:

  • The left side of ?? is evaluated first.
  • If the left side is null or undefined, the right side is returned.
  • Otherwise, the left side is returned.

It's especially handy when dealing with optional properties or potentially missing data.


Optional chaining and nullish coalescing help you write more readable, robust, and error-resistant code.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more