JavaScript Type Coercion — What does this output?

Why This Question Matters

If you've spent any time in a JavaScript codebase, you've probably run into a bug where a value was null or undefined, and suddenly your math stopped making sense. This specific challenge—null + 1 vs undefined + 1—is a classic "gotcha" that trips up a lot of developers, even those who have been coding for a few years.

The reason it's confusing is that null and undefined feel like the same thing: "nothing." But in JavaScript, they are treated very differently by the engine when it comes to type coercion. Understanding this distinction is the difference between a predictable app and one that randomly crashes because of a NaN propagating through your state.

Understanding the Code

Let's look at the snippet:

console.log(null + 1)
console.log(undefined + 1)

At first glance, you might think both would return 1, or maybe both would return NaN. But JavaScript handles these two types differently during arithmetic operations.

The null side of things:
When you use a mathematical operator (like +) with null, JavaScript attempts to coerce the value into a number. In the JS spec, null is coerced to 0.

So, null + 1 effectively becomes 0 + 1. Simple.

The undefined side of things:
undefined is a different beast. It represents a variable that has been declared but hasn't been assigned a value yet. When JavaScript tries to coerce undefined into a number, it doesn't have a default numeric value like null does. Instead, it results in NaN (Not a Number).

Since NaN is "contagious," any math operation performed with NaN will almost always result in NaN.

So, undefined + 1 becomes NaN + 1, which equals NaN.

Finding the Correct Answer

Based on the logic above, the output is:
1
NaN

This matches Option B.

If you guessed that null would result in NaN, you're likely thinking of how other languages handle null pointers. If you guessed that undefined would be treated as 0, you're probably thinking of how some languages handle default values. In JavaScript, the rule is: null is an intentional absence of value (which casts to 0), while undefined is an unintentional or uninitialized absence (which casts to NaN).

Common Mistakes Developers Make

The biggest mistake is assuming null == undefined means they behave the same in every context. While it's true that null == undefined is true (because of loose equality), they behave completely differently when it comes to type coercion.

Another common trap is the "NaN check." Beginners often try to check for NaN using:

if (result === NaN) { // This will ALWAYS be false
  console.log("It is NaN");
}

NaN is the only value in JavaScript that is not equal to itself. To actually catch the result of undefined + 1, you have to use isNaN() or Number.isNaN().

Also, watch out for string concatenation. If you do null + "1", you won't get 1. You'll get the string "null1" because the + operator switches to string concatenation mode the moment a string is involved.

Real-World Usage

You won't often see someone explicitly adding 1 to null in a production codebase, but this logic pops up constantly in data fetching and state management.

Imagine you're building a shopping cart. You have a quantity variable.
- If the API returns null for the quantity, and you do quantity + 1, your code might silently treat it as 0 + 1 and set the quantity to 1.
- If the API response is missing the field entirely (leaving it undefined), and you do quantity + 1, you get NaN.

If that NaN then gets saved back to your database or passed into a UI component, it can break your entire layout or cause your checkout logic to fail. This is why I always recommend using nullish coalescing (??) to provide a fallback before doing math:

const total = (quantity ?? 0) + 1;

This ensures that regardless of whether the value is null or undefined, you're starting from a safe numeric baseline.

Key Takeaways

- null is treated as 0 during numeric coercion.
- undefined is treated as NaN during numeric coercion.
- NaN is contagious; once a calculation hits NaN, the result stays NaN.
- Don't rely on implicit coercion for business logic. Use default values (like ?? 0) to keep your math predictable.
- Remember that NaN === NaN is false. Always use Number.isNaN().