JavaScript Default Parameters

Why This Question Matters

If you've spent any time with JavaScript, you know that the language loves to surprise you. One of those "gotchas" is how it handles default parameters. On the surface, b = 10 looks straightforward: if you don't provide b, it's 10. Simple, right?

Not exactly.

The confusion stems from how JavaScript distinguishes between a value that is "missing" and a value that is explicitly "empty." This is a classic interview question because it tests whether you actually understand the difference between undefined and null. If you treat them as the same thing, you'll end up with bugs in your production code that are a nightmare to debug.

Understanding the Code

Let's look at the snippet again:

const add = (a, b = 10) => a + b
console.log(add(5))
console.log(add(5, undefined))
console.log(add(5, null))

Here, we have an arrow function with a default parameter for b. In JavaScript, a default parameter is only triggered if the argument passed to the function is exactly undefined.

Here is what's happening under the hood for each call:

1. add(5): You didn't pass a second argument. JavaScript sees that b is missing, treats it as undefined, and triggers the default value of 10. Result: 5 + 10 = 15.
2. add(5, undefined): You explicitly passed undefined. To the JavaScript engine, this is the same as not passing anything at all. The default value kicks in again. Result: 5 + 10 = 15.
3. add(5, null): Here is the trick. null is an actual value. It represents the intentional absence of any object value. Because null is not undefined, the engine says, "Cool, the user provided a value," and it uses null for the calculation. Since null is coerced to 0 when doing addition, you get 5 + 0. Result: 5.

Finding the Correct Answer

The output of the code is:
15
15
5

This corresponds to Option B.

The logic boils down to a single rule: Default parameters only trigger for undefined.

If you pass null, false, 0, or an empty string "", JavaScript considers those valid values. It won't overwrite them with your default. Only undefined (or omitting the argument entirely) allows the default value to take over.

Common Mistakes Developers Make

The most common mistake is assuming that null and undefined are interchangeable. In many other languages, "null" is the catch-all for "nothing." In JS, they are distinct types.

Another common trip-up is confusing default parameters with "falsy" checks. Some developers try to handle defaults inside the function body like this:

const add = (a, b) => {
  const finalB = b || 10; 
  return a + finalB;
}

This is a dangerous pattern. Why? Because the || operator checks for falsiness. If you actually wanted to pass 0 as the value for b, the || operator would see 0 as falsy and overwrite it with 10. Your function would return 15 instead of 5, which is a silent bug that can wreck your logic.

Using the ES6 default parameter syntax (b = 10) is much safer because it specifically targets undefined and ignores other falsy values like 0 or false.

Real-World Usage

In a production environment, you'll see this most often when dealing with API responses or configuration objects.

Imagine you're building a pagination component. You might have a function like:

const fetchPage = (pageNumber = 1, limit = 20) => {
  // API call logic
}

If a user is on the first page, your frontend might send undefined for the page number, and the function correctly defaults to 1. But if your backend sends null for a limit because of a database error, and you're using default parameters, that null will pass through. If you then try to perform math on that limit, you might end up with NaN or unexpected zeros.

This is why it's crucial to know exactly what your data sources are sending. If an API returns null for missing values, default parameters won't save you. You'll need to explicitly check for null or use the nullish coalescing operator (??).

Key Takeaways

- Default parameters only kick in when the value is undefined.
- null is a value. It does not trigger default parameters.
- Avoid || for defaults if 0, false, or "" are valid inputs for your function.
- Nullish Coalescing (??) is your best friend if you want to provide a fallback for both null and undefined.

Understanding this distinction is the difference between fighting with your code and actually controlling it. Keep an eye on your types, and you'll avoid most of the "weird" JS behavior.