Nullish coalescing & optional chaining

Missing, not merely empty

The previous Logical operators lesson showed why count || 10 is dangerous when count can be 0. JavaScript now has a sharper tool for that exact problem: nullish coalescing, written ??.

Nullish means exactly null or undefined. It does not mean every falsy value. A muted volume of 0, an answered checkbox of false, and an intentionally blank string can all be real data.

Optional chaining, written ?., solves a related problem. It lets you read through data that may be incomplete without writing the same long guard again and again.

left ?? right asks one narrow question: “is left null or undefined?” If yes, it returns right. Otherwise it returns left unchanged.

const displayName = user.name ?? "Anonymous";
const volume = savedVolume ?? 50;
const city = userCity ?? "Unknown";

This is not type conversion. JavaScript is not turning 0 into true or false before deciding. It is checking for the two missing-value markers from the Booleans, null & undefined lesson.

1const value = 0;2console.log(value || "default");3console.log(value ?? "default");

So || is not wrong. It is just a different question: “is the left side falsy?” Use it when blanks, zero, false, and NaN should all be rejected. Use ?? when those values might be meaningful.

In the Logical operators lesson you saw guard chains like user && user.address && user.address.city. Optional chaining is the direct version: user?.address?.city.

Optional chaining has three common forms: property reads, obj?.name; bracket reads, arr?.[0] or obj?.[key]; and optional calls, fn?.() or obj.method?.().

1const user = { name: "Asha", address: { city: "Pune" }, tags: ["admin"], greet() { return "Hi Asha"; } };Run2let checks = 0;3function mark(label) {4  checks += 1;5  return label;6}7function riskyCity() {8  try {9    return user.address.city;10  } catch (error) {11    return error.name;12  }13}14const safeCity = user?.address?.[mark("city")];15const firstTag = user?.tags?.[0];16const greeting = user?.greet?.();17const noFunction = undefined;18const optionalCall = noFunction?.();19const notCallable = (() => {20  try {21    return ({ run: 7 }).run?.();22  } catch (error) {23    return error.name;24  }25})();26const missingUser = null;27const skipped = missingUser?.[mark("skipped")];28console.log(riskyCity(), safeCity, firstTag, greeting, optionalCall, notCallable, checks, skipped);

Notice the precise limit: ?. checks only the value immediately before it. It short-circuits when that value is null or undefined. If the property exists but is the wrong kind of value, normal JavaScript rules still apply.

Logical assignment operators update a variable or property only when the matching logical operator says to. They are shortcuts, but they are also readable when the intent is simple.

• x ??= y: fill this box only if it is empty, meaning nullish.
• x ||= y: replace it if it is falsy.
• x &&= y: update it only if something truthy is already there.

1const settings = { volume: undefined, theme: "", retries: null };Run2const user = { nickname: "  Ada  " };3settings.volume ??= 50;4settings.theme ||= "light";5settings.retries &&= settings.retries + 1;6user.nickname &&= user.nickname.trim();7console.log(settings.volume, settings.theme, settings.retries, user.nickname);

The most important beginner mistake is using ||= for settings where 0 is meaningful. A muted volume should stay muted.

JavaScript intentionally rejects a few expressions that look tempting. The first rule: do not mix ?? with && or || unless you add parentheses.

const a = null;
const b = "backup";
const c = "last";
console.log(a || b ?? c);

const a = null;
const b = "backup";
const c = "last";
console.log((a || b) ?? c);

The second rule: optional chaining cannot be the target of assignment. This is invalid because JavaScript cannot store a property on “maybe nothing.”

const obj = { a: 1 };
obj?.a = 2;

Where you’ll use this

You will see these operators around profiles, configuration, optional callbacks, and data from outside your program. Objects and arrays get their own full lessons in Stage 3, so read the examples as simple containers: { name: "Ada" } has named properties, and ["admin"] has items by index.

const user = { name: "Asha", address: { city: "Pune" }, nickname: "" };
const displayName = user.nickname ?? user.name ?? "Guest";
const city = user.address?.city ?? "Unknown";
const firstRole = user.roles?.[0] ?? "reader";
console.log(displayName, city, firstRole);

Line 2 keeps an empty nickname because ?? treats it as present. If your product says blank nicknames should fall back, that specific line should use || instead. Operator choice follows the product rule.

Common misconceptions

• “Nullish means falsy.” No: nullish means only null or undefined.
• “?? is a better ||.” It is different, not universally better.
• “?. makes a whole expression safe.” It protects only the link where you put it.
• “method?.() checks whether it is a function.” It skips missing methods, but non-functions still throw.
• “Logical assignment is just shorter.” It also communicates the exact condition for assigning.
• “Use ?. everywhere.” Required data should fail loudly so bugs are visible.

Key takeaways

• ?? falls back only for null and undefined.
• || falls back for every falsy value, so it can erase 0, false, and blank strings.
• ?. returns undefined when the link before it is nullish.
• ?.() skips missing calls, but existing non-functions still throw TypeError.
• ??=, ||=, and &&= assign only when their matching logical test passes.
• Parenthesize when mixing ?? with && or ||.

Final definition: ?? supplies a backup for missing values, and ?. safely stops optional property or call chains at missing links.

Up next: The rest of the operators.