Default Parameters
Learn to set default values for function parameters in JavaScript.
Default parameters, introduced in ES6, let you specify fallback values for function arguments. This eliminates the need for manual undefined checks and makes your functions more robust. Default parameters make your code cleaner and help prevent errors when arguments are not provided.
📚 Concepts & Theory
Basic Default Parameter:
function greet(name = "Guest") {
return Hello, ${name}!;
}
greet(); // "Hello, Guest!"
greet("Alice"); // "Hello, Alice!"
Multiple Defaults:
function createUser(name, role = "user", active = true) {
return { name, role, active };
}
createUser("Bob");
// { name: "Bob", role: "user", active: true }
createUser("Alice", "admin");
// { name: "Alice", role: "admin", active: true }
Using Expressions:
function getTimestamp(date = new Date()) {
return date.toISOString();
}
function greet(name = "User", greeting = Hello, ${name}) {
return greeting;
}
Old Way vs New Way:
// Old way (ES5)
function oldGreet(name) {
name = name || "Guest";
return "Hello, " + name;
}
// New way (ES6+)
function newGreet(name = "Guest") {
return Hello, ${name};
}
Note: Default is only used when argument is undefined, not when it is null or empty string.
🎯 Your Challenge
Create a function called `calculatePrice` that takes `price`, `taxRate` (default 0.1), and `discount` (default 0). It should return the final price: (price - discount) * (1 + taxRate). Test it with just price = 100.
📝 Starter Code
// Create the function with default parameters
function calculatePrice(price, taxRate = , discount = ) {
// Calculate and return final price
}
// Test with just price
const finalPrice = calculatePrice(100);
// Should be 110 (100 with 10% tax, no discount)- Put = and the default value after the parameter name
- Required parameters should come first
- Default is used when argument is undefined
- You can use any expression as a default
Solution
function calculatePrice(price, taxRate = 0.1, discount = 0) {
return (price - discount) * (1 + taxRate);
}
const finalPrice = calculatePrice(100);Explanation
We define default values using = after each parameter. When called with just 100, taxRate defaults to 0.1 and discount defaults to 0. The calculation is (100 - 0) * (1 + 0.1) = 110.
⚠️ Common Mistakes to Avoid
- Putting default parameters before required ones
- Using null instead of undefined behavior
- Forgetting that empty string does not trigger default
- Complex expressions that cause errors