Nullish Coalescing

In the previous lesson, we used || to set default values. Now let’s learn a safer way to do that with the nullish coalescing operator.

❓ What is Nullish Coalescing?

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

It is mainly used to provide a default value.

const username = null;
const displayName = username ?? "Guest";

console.log(displayName); // "Guest" because username is null

Here we ask ?? to pick between a real name and a fallback:

• We set username to null, meaning we have no name to show.
• username ?? "Guest" checks the left side first; since it is null, the operator returns the right side, "Guest".
• We store that result in displayName and log it, so "Guest" prints.

🔍 ?? vs || (Why It Matters)

The OR operator || falls back to the default for any falsy value, including 0 and "". The ?? operator only falls back for null and undefined. This difference matters when 0 or an empty string is a valid value.

const count = 0;

console.log(count || 10); // 10  → || treats 0 as missing
console.log(count ?? 10); // 0   → ?? keeps 0 because it is not null/undefined

This block runs the same value through both operators so we can see them diverge:

• We set count to 0, a number that is falsy but still a real value.
• count || 10 sees a falsy left side and falls back to 10, throwing away our 0.
• count ?? 10 only falls back for null or undefined; since 0 is neither, it keeps 0.

So the difference is the trigger: || reacts to every falsy value, while ?? reacts only to null and undefined.

🛒 A Practical Example

Imagine showing the number of items in a cart. A real count of 0 should display as 0, not the default.

const cartItems = 0;

const itemsToShow = cartItems ?? "No data";
console.log(itemsToShow); // 0  → correct, the cart really has 0 items

Here we protect a genuine 0 from being mistaken for missing data:

• We set cartItems to 0, meaning the cart is real but empty.
• cartItems ?? "No data" checks the left side; 0 is not null or undefined, so the operator keeps it.
• We store and log that value, so 0 prints instead of the "No data" fallback.

If you used || here, an empty cart would wrongly show “No data”.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ ?? returns the default only when the value is null or undefined
• ✅ || falls back for any falsy value, including 0 and ""
• ✅ Use ?? when 0, "", or false are valid values to keep
• ✅ Combining ?? with && or || requires parentheses

🚀 What’s Next?

Next we will learn how to safely read properties from objects that might not exist. Let’s continue to Optional Chaining.