TypeScript Optional & Default Parameters
Make function parameters flexible and user-friendly
❓ What are Optional & Default Parameters?
Optional parameters allow functions to be called without providing all arguments, while default parameters provide fallback values. These features make functions more flexible and reduce the need for multiple function definitions.
// Optional parameter with ?
function greet(name: string, greeting?: string): string {
return `${greeting || "Hello"}, ${name}!`;
}
console.log(greet("Alice"));
console.log(greet("Bob", "Hi"));
Output:
Hello, Alice!
Hi, Bob!
Parameter Features
Optional Parameters
Use ? to make parameters optional
function build(
name: string,
age?: number
) { }Default Values
Assign default parameter values
function greet(
name: string = "Guest"
) { }Flexibility
Call functions with fewer arguments
build("Alice");
build("Bob", 25);Type Safety
Maintain type checking
// Still type-safe
greet(); // ✓
greet("Alice"); // ✓🔹 Optional Parameters
Use the ? symbol to make parameters optional:
function createUser(name: string, age?: number, email?: string): string {
let info = `User: ${name}`;
if (age !== undefined) {
info += `, Age: ${age}`;
}
if (email !== undefined) {
info += `, Email: ${email}`;
}
return info;
}
console.log(createUser("Alice"));
console.log(createUser("Bob", 25));
console.log(createUser("Charlie", 30, "[email protected]"));Output:
🔹 Default Parameters
Provide default values for parameters:
function calculatePrice(
price: number,
taxRate: number = 0.1,
discount: number = 0
): number {
const tax = price * taxRate;
const total = price + tax - discount;
return total;
}
console.log(`Price 1: $${calculatePrice(100)}`);
console.log(`Price 2: $${calculatePrice(100, 0.15)}`);
console.log(`Price 3: $${calculatePrice(100, 0.15, 10)}`);Output:
Price 1: $110
Price 2: $115
Price 3: $105
🔹 Combining Optional and Default Parameters
Use both features together:
function sendMessage(
recipient: string,
message: string = "Hello!",
priority?: "low" | "medium" | "high"
): string {
let output = `To: ${recipient}, Message: ${message}`;
if (priority) {
output += `, Priority: ${priority}`;
}
return output;
}
console.log(sendMessage("Alice"));
console.log(sendMessage("Bob", "Welcome!"));
console.log(sendMessage("Charlie", "Urgent!", "high"));Output:
To: Alice, Message: Hello!
To: Bob, Message: Welcome!
To: Charlie, Message: Urgent!, Priority: high
🔹 Optional Parameters with Objects
Make object properties optional:
function displayProfile(user: {
name: string;
age?: number;
city?: string;
}): void {
console.log(`Name: ${user.name}`);
if (user.age) {
console.log(`Age: ${user.age}`);
}
if (user.city) {
console.log(`City: ${user.city}`);
}
}
displayProfile({ name: "Alice" });
console.log("---");
displayProfile({ name: "Bob", age: 28, city: "New York" });Output:
Name: Alice
---
Name: Bob
Age: 28
City: New York
🔹 Default Parameters with Complex Types
Use default values with objects and arrays:
function createConfig(
name: string,
options: { theme: string; language: string } = {
theme: "light",
language: "en"
}
): string {
return `Config: ${name}, Theme: ${options.theme}, Language: ${options.language}`;
}
console.log(createConfig("App1"));
console.log(createConfig("App2", { theme: "dark", language: "es" }));Output:
Config: App1, Theme: light, Language: en
Config: App2, Theme: dark, Language: es
💡 Important Rules:
- Optional parameters must come after required parameters
- Default parameters automatically become optional
- You can't have required parameters after optional ones
-
Use undefined to skip default parameters:
func(1, undefined, 3) - Default values are evaluated at call time, not definition time