JavaScript Default Parameters

In the previous lesson, we learned how to build strings cleanly with template literals. Now let’s look at default parameters, which let a function fill in a value when no argument is passed.

🎯 What are Default Parameters?

A default parameter is a fallback value that a function uses when you call it without that argument. You set it right in the function’s parameter list with an equals sign.

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet("Alex"); // Hello, Alex!
greet(); // Hello, Guest!

Let’s walk through what this code does:

• name = "Guest" sets "Guest" as the fallback for the name parameter, used only when no argument is passed.
• greet("Alex") passes a value, so name is "Alex" and we print Hello, Alex!.
• greet() passes nothing, so name falls back to "Guest" and we print Hello, Guest!.

🕰️ The Old Way vs the Modern Way

Before default parameters existed, you had to check for a missing value inside the function and set the fallback yourself. This worked but added an extra line of clutter.

// ❌ The old way: checking inside the function
function greet(name) {
  name = name || "Guest";
  console.log(`Hello, ${name}!`);
}

Here is what each line does in the old approach:

• function greet(name) takes name with no fallback built in.
• name = name || "Guest" reassigns name to "Guest" whenever the passed value is falsy.
• console.log(...) then prints the greeting using whatever name ended up as.

Default parameters move that fallback into the parameter list, so the function body stays focused on its real job.

// ✅ The modern way: a default parameter
function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

The modern version folds the fallback into the signature:

• name = "Guest" handles the missing value right where the parameter is declared.
• The body now only prints the greeting, with no extra check cluttering it.

🚫 Defaults Only Apply for undefined

A default value kicks in only when the argument is undefined, which happens when you pass nothing at all. It does not apply for null, 0, "", or any other falsy value.

function greet(name = "Guest") {
  console.log(`Hello, ${name}!`);
}

greet(); // Hello, Guest!   (undefined → default used)
greet(undefined); // Hello, Guest!   (undefined → default used)
greet(null); // Hello, null!    (null is NOT undefined)
greet(""); // Hello, !         (empty string is a real value)

Let’s compare each call:

• greet() passes nothing, so name is undefined and the default "Guest" is used.
• greet(undefined) passes undefined explicitly, which also triggers the default.
• greet(null) passes null, a real value, so the default is skipped and we print null.
• greet("") passes an empty string, also a real value, so the default is skipped.

🔗 Defaults Can Reference Earlier Parameters

A default value can use the values of parameters that come before it. This lets a later parameter build on an earlier one.

function createUser(name, role = "member", label = `${name} (${role})`) {
  console.log(label);
}

createUser("Alex"); // Alex (member)
createUser("Sam", "admin"); // Sam (admin)

Here is how the defaults chain together:

• role = "member" gives role a fallback when no second argument is passed.
• label = `${name} (${role})` builds its default from the earlier name and role parameters.
• createUser("Alex") fills only name, so role defaults to "member" and label becomes Alex (member).
• createUser("Sam", "admin") fills name and role, so label becomes Sam (admin).

Here label defaults to a string built from name and role. Note that the order matters: a parameter can only reference ones defined to its left.

🛠️ A Practical Example

Default parameters shine when a function has an optional setting. Imagine a function that formats a price and lets the caller choose a currency symbol, but uses a sensible default.

function formatPrice(amount, symbol = "$") {
  return `${symbol}${amount.toFixed(2)}`;
}

console.log(formatPrice(19.5)); // $19.50
console.log(formatPrice(19.5, "€")); // €19.50

Let’s break down this example:

• symbol = "$" makes the currency symbol optional, defaulting to a dollar sign.
• amount.toFixed(2) formats the number with exactly two decimal places.
• formatPrice(19.5) passes only the amount, so symbol stays "$" and we get $19.50.
• formatPrice(19.5, "€") passes a euro symbol, overriding the default to get €19.50.

Most callers just want dollars, so they pass only the amount. The few who need another currency pass the second argument.

⚠️ Common Mistakes to Avoid

🔧 Try It Yourself!

🧩 What You’ve Learned

• ✅ A default parameter gives a function argument a fallback value
• ✅ Defaults apply only when the argument is undefined, not for null or other falsy values
• ✅ Default parameters replace the old habit of checking for missing values inside the function
• ✅ A default can reference parameters defined before it
• ✅ Required parameters should come before optional, defaulted ones

🚀 What’s Next?

Now that your functions can fill in missing values, we will learn how to split code across files and share it. Let’s continue to Modules.