Platform under construction

Operators & Expressions

Intermediate

Nullish & Optional Chaining

Nullish coalescing and optional chaining handle missing values without treating every falsy value as missing.

const count = 0;
count ?? 10; // 0
count || 10; // 10

user.owner?.name ?? "No owner"

Operators & Expressions

Use nullish tools when only null or undefined should be special.

The nullish coalescing operator, ??, returns the right-hand value only when the left-hand value is null or undefined.

Optional chaining, ?., safely reads through a path that may contain null or undefined. Instead of throwing, it returns undefined for that missing path.

Together they are excellent for API data, optional settings and UI state. They prevent noisy guard code while preserving valid falsy values such as 0, false and empty strings.

??

Fallback only for null or undefined. Keeps 0, false and empty string.

?.

Safely reads a property, element or method call from a maybe-missing value.

??=

Assigns a default only when the target is null or undefined.

Parentheses

Use parentheses when combining ?? with && or ||.

Examples

Operators are small symbols with big consequences.

Fallback without destroying valid values

const cartInfo = { itemCount: 0, owner: null };

const items = cartInfo.itemCount ?? 10;
const owner = cartInfo.owner?.name ?? "Not planned yet";

console.log(items);    // 0
console.log(owner); // "Not planned yet"

Using || when 0 means something

const cartInfo = { itemCount: 0 };

const items = cartInfo.itemCount || 10;
console.log(items); // 10

Rules that matter

Make expression intent visible.

JavaScript operators are compact, but compact is not always clear. Convert values before comparing or calculating, use strict checks by default and add parentheses when a future reader would otherwise need to remember a precedence table.

Use ?? for missing values

It treats only null and undefined as missing.

Use ?. for optional paths

It prevents errors when a middle part of the path is missing.

Do not hide real data

0, false and empty strings can be valid values.

Keep chains readable

Very long optional chains usually mean the data needs normalization.

Use ??= for defaults

It is useful for config objects and state initialization.

Parenthesize mixed logic

JavaScript does not allow unparenthesized mixing of ?? with && or ||.

Production thinking

Readable expressions prevent silent bugs.

Why does this matter?

Nullish operators let you describe missing data precisely. That is much better than treating every falsy value as a problem.

Accessibility

Optional content needs clear fallbacks so labels and messages do not disappear when data is missing.

Production note

Production APIs often omit nested fields. Optional chaining and nullish fallback make those paths safer and clearer.

SEO note

Missing metadata and optional content need deliberate fallbacks, not accidental empty output.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Replace ?? with || and explain why itemCount changes.
Add an owner object with a name property.
Use ??= to set user.city when it is missing.

Practice assignment

Do this before moving to the next topic.

Write a fallback that keeps 0.
Write an optional chain for a nested object.
Parenthesize an expression that combines ?? and ||.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Nullish & Optional Chaining.