JavaScript Nullish Coalescing — What is logged?

Why This Question Matters

If you've been coding in JavaScript for a while, you've probably spent way too much time fighting with "falsy" values. For years, the go-to move for setting a default value was the logical OR operator (||). It worked most of the time, but it had a nasty habit of triggering when you didn't actually want it to—like when a user entered 0 or an empty string "".

That's why the Nullish Coalescing Operator (??) was introduced. It solves a very specific problem: distinguishing between "this value is missing" and "this value is just falsy." If you're preparing for a technical interview or just trying to clean up your codebase, understanding the difference between || and ?? is a non-negotiable skill.

Understanding the Code

Let's look at the snippet again:

const name = undefined
const displayName = name ?? "Guest"
console.log(displayName)

At first glance, it looks simple. We have a variable name that is explicitly set to undefined. Then, we use the ?? operator to assign a value to displayName.

Here is what's happening under the hood: The nullish coalescing operator checks the value on its left side. If that value is nullish (meaning it is either null or undefined), it ignores it and returns the value on the right side. If the left side is anything else—even 0, false, or an empty string—it sticks with the left side.

In this specific case, name is undefined. Since undefined is one of the two "nullish" values, the operator decides that name isn't useful and falls back to the string "Guest".

Finding the Correct Answer

The correct answer is Option B: "Guest".

Why not the others? If the code had used the logical OR operator (||), the result would still be "Guest", but for a different reason. The OR operator checks for *any* falsy value. Since undefined is falsy, it moves to the right.

However, the ?? operator is much more surgical. It only cares about null and undefined.

To see why this distinction matters, imagine if name was an empty string:

const name = ""

const displayName = name ?? "Guest" 

// Result: "" (Empty string is NOT null or undefined)

Common Mistakes Developers Make

The biggest mistake juniors make is treating ?? and || as interchangeable. They aren't.

The "falsy" trap is the most common point of failure. In JavaScript, the following are all falsy:
- false
- 0
- "" (empty string)
- null
- undefined
- NaN

If you use || to set defaults for a numeric input, and the user enters 0, your code will treat that 0 as "missing" and overwrite it with your default value. That's a classic bug that can be hard to track down in a large application.

Another common trip-up is trying to use ?? with the assignment operator. You'll often see ??= in modern codebases (the nullish coalescing assignment). It's a shorthand that only assigns a value if the current variable is nullish. If you see x ??= y, just remember it's basically saying: "If x is null or undefined, give it the value of y."

Real-World Usage

In a production environment, you'll see this everywhere—especially when dealing with API responses or configuration files.

Imagine you're fetching a user profile from a database. Some users might not have a middleName set, so the API returns null. Other users might have a score of 0.

const userSettings = {
  theme: "dark",
  notifications: false,
  retryAttempts: 0,
  bio: null
};
// Correct: We want to keep 'false' and '0'

const theme = userSettings.theme ?? "light"; // "dark"

const notify = userSettings.notifications ?? true; // false

const retries = userSettings.retryAttempts ?? 3; // 0

const bio = userSettings.bio ?? "No bio provided"; // "No bio provided"

If we used || in the example above, notifications would become true and retryAttempts would become 3. That would completely break the user's actual settings. By using ??, we ensure that we only provide defaults when the data is truly missing.

Key Takeaways

- Use ?? when you only want to provide a fallback for null or undefined.
- Use || only when you want to treat all falsy values (like 0 or "") as "missing."
- undefined and null are the only two values that trigger the right-hand side of a ?? expression.
- This operator is a lifesaver for handling optional API data without accidentally overwriting valid zeros or booleans.