Nullish coalescing & optional chaining

Missing is not the same as empty

In the Logical operators lesson, you saw a problem with count || 10. If count is 0, you get 10, and the real 0 is lost. This lesson shows a tool made for that problem. It is called nullish coalescing, and you write it as ??.

A value is nullish when it is null or undefined. Those are the only two nullish values. Other falsy values are not nullish, and they can be real data:

• 0 can be a volume that is turned all the way down.
• false can be a checkbox that someone left unticked on purpose.
• "", the empty string, can be a blank label that someone chose.

The second tool is optional chaining, written ?.. It lets you read data that might be incomplete. You don't have to write a long check before every read.

left ?? right asks one question: "Is left equal to null or undefined?"

• If yes, the result is right.
• If no, the result is left, unchanged.

const displayName = undefined;
const savedVolume = 0;
const city = null;
console.log(displayName ?? "Anonymous", savedVolume ?? 50, city ?? "Unknown");

Line 1 sets displayName to undefined, so line 4 uses "Anonymous". Line 2 sets savedVolume to 0. That is a real value, so it stays 0. Line 3 sets city to null, so it becomes "Unknown". The output is Anonymous 0 Unknown.

The two operators ask different questions. || asks, "Is the value falsy?" ?? asks only, "Is the value null or undefined?" Those are the two "nothing here" values from the Booleans, null & undefined lesson.

Like ||, ?? works from left to right. JavaScript looks at the left side first. It runs the right side only when the left side is null or undefined. This helps when the backup takes work, like calling a function.

const savedName = "Asha";
function makeGuest() {
  console.log("backup checked");
  return "Guest";
}
console.log(savedName ?? makeGuest());

Line 1 stores the name "Asha". Lines 2 to 5 make a backup function. If it ran, it would print backup checked. Line 6 prints Asha. The backup function never runs, because "Asha" is not null or undefined.

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

The table below tries each value with both operators. Read each row as: "when the value is this, || gives this, and ?? gives this."

So || is not wrong. It asks a different question: "Is the left side falsy?" Use || when you want to replace every falsy value, such as "", 0, false, and NaN. Use ?? when those values can be real data.

In the Logical operators lesson, you saw long checks like user && user.address && user.address.city. Each && checks that one part is there before the next part is read. Optional chaining does the same job in a shorter way: user?.address?.city.

Here is what ?. does:

• It looks at the value just before it.
• If that value is null or undefined, it stops. The result is undefined, and there is no error.
• If not, it reads the next part as usual.

You can put ?. in three places:

• Before a property name: obj?.name.
• Before square brackets: arr?.[0] or obj?.[key].
• Before call brackets: fn?.() or obj.method?.(). The call happens only if the function is there.

const user = {
  name: "Asha",
  tags: ["reader"],
  greet() {
    return "Hi " + this.name;
  },
};
console.log(user?.name, user?.tags?.[0], user.greet?.());

Lines 1 to 7 make a user object. It has a name, a list of tags with one tag in it, and a greet method. Line 8 does three things: it reads the name, reads the first tag, and calls greet. Every part is there, so the output is Asha reader Hi Asha.

greet is called on user, so inside it, this is user. That is how greet can read the name.

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);

Remember: ?. checks only the value just before it. It stops only when that value is null or undefined. If the value is there but is the wrong kind of value, the normal rules apply. For example, trying to call the number 7 with ?.() still throws a TypeError.

These three operators are called logical assignment operators. Each one checks a variable or property first. Then it stores a new value only if the check passes.

• x ??= y stores y only if x is null or undefined. It fills in a missing value.
• x ||= y stores y only if x is falsy. It replaces any falsy value.
• x &&= y stores y only if x is truthy. It updates a value that is already there.

const settings = { volume: 0, theme: undefined, nickname: "Asha" };
settings.volume ??= 50;
settings.theme ??= "light";
settings.nickname &&= settings.nickname.trim();
console.log(settings.volume, settings.theme, settings.nickname);

Line 1 makes a settings object. Line 2 keeps the volume at 0, because 0 is not nullish. Line 3 fills in the missing theme with "light". Line 4 runs its update because "Asha" is truthy. It stores the trimmed nickname. The .trim() method removes spaces from the start and end of a string. The output is 0 light Asha.

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);

A common beginner mistake is using ||= for a setting where 0 is a real choice. volume ||= 50 would turn a muted volume back up to 50. Use ??=, so a muted volume stays muted.

JavaScript refuses to run a few lines that look fine at first. The first rule: you can't write ?? next to && or || without round brackets. The round brackets show which part runs first.

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);

In the valid version, the brackets tell JavaScript to work out a || b first. a is null, so a || b gives "backup". That value is not nullish, so ?? c keeps it. The output is backup.

The second rule: you can't put ?. on the left side of =. If obj were missing, JavaScript would have nowhere to store the new value. So it refuses the line before running anything.

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

The last case is a different error. ?. can't help with a variable name that doesn't exist.

console.log(missingUser?.name);

This throws a ReferenceError. The problem is not name. The problem is that JavaScript can't find a variable called missingUser at all. ?. can stop at a null or undefined value. It can't create a variable, and it can't fix a typo in a name.

Where you’ll use this

You'll see these operators in code that reads user profiles, saved settings, optional functions, and data that comes from outside your program. Objects and arrays get their own lessons in Stage 3. For now, read them as simple containers:

• { name: "Ada" } is an object. It has named properties, like name.
• ["admin"] is an array. It has items that you read by position, starting at 0.

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 the empty nickname, because ?? treats "" as a real value. Line 3 reads the city, "Pune". Line 4 finds no roles, so ?. gives undefined, and ?? uses "reader". Line 5 prints the empty nickname, then Pune reader.

What if your app says a blank nickname should use the name instead? Then line 2 should use ||. Pick the operator that matches the rule your app needs.

This matters when a form is only partly filled in. These are two different cases:

• The whole contact object is missing.
• The contact object is there, but its phone is blank.

?. handles the first case. Then your app's rule decides if a blank phone is OK.

const profile = { contact: { phone: "" } };
const savedPhone = profile.contact?.phone ?? "No phone saved";
const displayPhone = profile.contact?.phone || "Add a phone number";
console.log(savedPhone, displayPhone);

Line 1 makes a profile with a contact object. Its phone is an empty string, on purpose. Line 2 keeps that empty string, because ?? sees a real value. Line 3 gives "Add a phone number", because || replaces an empty string. Line 4 prints an empty value first, then Add a phone number.

Read profile.contact?.phone ?? "No phone saved" in two steps:

1. ?. tries to read the phone. It gives undefined only if a part is missing.
2. ?? replaces that undefined with the backup text.

Each operator has its own job. That makes the code easy to change when your app's rule changes.

Common misconceptions

• “Nullish means falsy.” No. Nullish means only null or undefined. Falsy also includes 0, false, "", and NaN.
• “?? is a better ||.” No. They ask different questions, so each one is right for a different job.
• “?. makes a whole line safe.” No. It checks only the value just before it.
• “method?.() checks that it is a function.” No. It skips only a missing method. A value that is not a function still throws a TypeError.
• “Logical assignment is just shorter.” It is shorter, and it also shows the exact check that decides whether to store.
• “Use ?. everywhere.” No. If data must be there, let the error show, so you can find the bug.

The table below compares six tools that look alike. Read each row as: "this tool checks this, it is useful for this, and watch out for this."

Key takeaways

• ?? uses the backup only for null and undefined.
• || uses the backup for every falsy value, so it can lose 0, false, and blank strings.
• ?. gives undefined when the value before it is null or undefined.
• ?.() skips a missing function, but a value that is not a function still throws a TypeError.
• ??=, ||=, and &&= store a new value only when their check passes.
• Use round brackets when you put ?? next to && or ||.

Final definition: ?? gives a backup for a missing value. ?. stops a property read or a call at a missing part and gives undefined.

Coming next: The rest of the operators.