🎯 Optional and Default Parameters: Flexible Function Design in TypeScript

🎯 Introduction

Welcome to the wonderful world of optional and default parameters in TypeScript! 🎉 In this guide, we’ll explore how to create flexible, user-friendly functions that adapt to different use cases.

Imagine building a coffee ordering system ☕ where customers might want sugar, milk, or specific sizes - but not everyone needs every option. That’s where optional and default parameters shine! They let you create functions that work perfectly whether called with one argument or ten.

By the end of this tutorial, you’ll be designing elegant APIs that your teammates will love using! Let’s dive in! 🏊‍♂️

📚 Understanding Optional and Default Parameters

🤔 What Are Optional Parameters?

Optional parameters are like extras on a pizza 🍕. The base pizza is great on its own, but you can add toppings if you want! In TypeScript, optional parameters let callers decide whether to provide certain arguments.

Optional parameters are marked with a ? after the parameter name:

function greet(name: string, emoji?: string) {
  // emoji is optional!
}

💡 What Are Default Parameters?

Default parameters are like having a favorite coffee order ☕. If you don’t specify, you get your usual! They provide fallback values when arguments aren’t supplied:

function makeCoffee(size: string = "medium", sugar: number = 1) {
  // If not specified, you get a medium coffee with 1 sugar!
}

🎯 Why Use Them?

Here’s why these features are game-changers:

Flexible APIs 🌈: Functions adapt to different use cases
Backward Compatibility 🔄: Add parameters without breaking existing code
Cleaner Code ✨: No more checking for undefined values
Better Developer Experience 😊: Intuitive function interfaces
Smart Defaults 🧠: Provide sensible fallbacks

🔧 Basic Syntax and Usage

📝 Optional Parameters

Let’s start with optional parameters:

// 🎨 Basic optional parameter
function greet(name: string, emoji?: string): string {
  if (emoji) {
    return `Hello ${name}! ${emoji}`;
  }
  return `Hello ${name}! 👋`;
}

// ✨ Using the function
console.log(greet("Alice"));           // "Hello Alice! 👋"
console.log(greet("Bob", "🎉"));       // "Hello Bob! 🎉"

// 🏗️ Multiple optional parameters
function createProfile(
  name: string,
  age?: number,
  city?: string,
  hobby?: string
): string {
  let profile = `Name: ${name}`;
  if (age) profile += `\nAge: ${age}`;
  if (city) profile += `\nCity: ${city}`;
  if (hobby) profile += `\nHobby: ${hobby}`;
  return profile;
}

// 🎯 Call with different combinations
console.log(createProfile("Sarah"));
console.log(createProfile("John", 25));
console.log(createProfile("Emma", 30, "NYC", "TypeScript 💙"));

🎨 Default Parameters

Now let’s explore default parameters:

// ☕ Function with default values
function orderCoffee(
  size: string = "medium",
  type: string = "latte",
  extras: string[] = []
): string {
  const order = `${size} ${type}`;
  if (extras.length > 0) {
    return `${order} with ${extras.join(", ")} ☕`;
  }
  return `${order} ☕`;
}

// 🎯 Various ways to call it
console.log(orderCoffee());                              // "medium latte ☕"
console.log(orderCoffee("large"));                       // "large latte ☕"
console.log(orderCoffee("small", "cappuccino"));         // "small cappuccino ☕"
console.log(orderCoffee("large", "mocha", ["whip", "caramel"])); // "large mocha with whip, caramel ☕"

// 🚀 Default parameters with expressions
function createTask(
  title: string,
  priority: number = 1,
  dueDate: Date = new Date(Date.now() + 24 * 60 * 60 * 1000) // Tomorrow!
): object {
  return {
    title,
    priority,
    dueDate,
    created: new Date(),
    emoji: priority > 3 ? "🔥" : "📋"
  };
}

🔄 Combining Optional and Default

// 🎮 Game character creation
function createCharacter(
  name: string,
  class: string = "warrior",
  level?: number,
  skills: string[] = ["basic attack"]
): object {
  return {
    name,
    class,
    level: level || 1, // If level not provided, default to 1
    skills,
    emoji: class === "mage" ? "🧙" : class === "warrior" ? "⚔️" : "🏹"
  };
}

// 🎯 Flexible usage
const hero1 = createCharacter("Aragorn");
const hero2 = createCharacter("Gandalf", "mage", 50);
const hero3 = createCharacter("Legolas", "archer", undefined, ["arrow shot", "eagle eye"]);

💡 Practical Examples

🛒 Example 1: E-commerce API

Let’s build a flexible product search function:

// 🛍️ Product interface
interface Product {
  id: string;
  name: string;
  price: number;
  category: string;
  inStock: boolean;
  emoji: string;
}

// 🔍 Flexible search function
function searchProducts(
  query: string,
  category?: string,
  maxPrice?: number,
  sortBy: "price" | "name" = "name",
  limit: number = 10
): Product[] {
  console.log(`🔍 Searching for: "${query}"`);
  console.log(`📁 Category: ${category || "all"}`);
  console.log(`💰 Max price: ${maxPrice ? `$${maxPrice}` : "no limit"}`);
  console.log(`📊 Sort by: ${sortBy}`);
  console.log(`📏 Limit: ${limit} results\n`);
  
  // Simulated search results
  const results: Product[] = [
    { id: "1", name: "TypeScript Handbook", price: 29.99, category: "books", inStock: true, emoji: "📘" },
    { id: "2", name: "Coffee Maker", price: 89.99, category: "appliances", inStock: true, emoji: "☕" },
    { id: "3", name: "Mechanical Keyboard", price: 149.99, category: "electronics", inStock: false, emoji: "⌨️" }
  ];
  
  // Filter logic would go here
  return results.slice(0, limit);
}

// 🎯 Different ways to search
const search1 = searchProducts("typescript");
const search2 = searchProducts("coffee", "appliances");
const search3 = searchProducts("keyboard", undefined, 200, "price", 5);

// 💡 Using undefined to skip parameters
const search4 = searchProducts("laptop", undefined, undefined, "price");

🎨 Example 2: UI Component Builder

Let’s create a flexible notification system:

// 🔔 Notification types
type NotificationType = "success" | "error" | "warning" | "info";

interface NotificationOptions {
  title: string;
  message: string;
  type: NotificationType;
  duration: number;
  icon: string;
  position: string;
  sound: boolean;
}

// 🎯 Flexible notification function
function showNotification(
  title: string,
  message: string = "",
  type: NotificationType = "info",
  duration: number = 3000,
  options?: Partial<NotificationOptions>
): void {
  // Set up defaults with emojis
  const icons: Record<NotificationType, string> = {
    success: "✅",
    error: "❌",
    warning: "⚠️",
    info: "ℹ️"
  };
  
  const notification: NotificationOptions = {
    title,
    message,
    type,
    duration,
    icon: options?.icon || icons[type],
    position: options?.position || "top-right",
    sound: options?.sound ?? true
  };
  
  console.log(`\n${notification.icon} ${notification.type.toUpperCase()}`);
  console.log(`Title: ${notification.title}`);
  if (notification.message) console.log(`Message: ${notification.message}`);
  console.log(`Duration: ${notification.duration}ms`);
  console.log(`Position: ${notification.position}`);
  console.log(`Sound: ${notification.sound ? "🔊" : "🔇"}`);
}

// 🚀 Usage examples
showNotification("Welcome!");
showNotification("Success!", "Your file has been saved", "success");
showNotification("Error", "Connection failed", "error", 5000);
showNotification(
  "Custom Alert",
  "This is fancy!",
  "warning",
  undefined,
  { icon: "🚨", position: "bottom-left", sound: false }
);

🎮 Example 3: Game Configuration

Let’s build a game settings system:

// 🎮 Game configuration builder
interface GameConfig {
  playerName: string;
  difficulty: "easy" | "normal" | "hard" | "nightmare";
  startingLives: number;
  soundEnabled: boolean;
  musicVolume: number;
  effectsVolume: number;
  controls: "keyboard" | "gamepad" | "touch";
  emoji: string;
}

class GameSetup {
  // 🏗️ Create game with flexible options
  static createGame(
    playerName: string,
    difficulty: GameConfig["difficulty"] = "normal",
    customSettings?: Partial<GameConfig>
  ): GameConfig {
    // 🎯 Difficulty-based defaults
    const difficultyDefaults = {
      easy: { lives: 5, emoji: "😊" },
      normal: { lives: 3, emoji: "🎮" },
      hard: { lives: 2, emoji: "💪" },
      nightmare: { lives: 1, emoji: "😈" }
    };
    
    const defaults = difficultyDefaults[difficulty];
    
    const config: GameConfig = {
      playerName,
      difficulty,
      startingLives: customSettings?.startingLives || defaults.lives,
      soundEnabled: customSettings?.soundEnabled ?? true,
      musicVolume: customSettings?.musicVolume ?? 70,
      effectsVolume: customSettings?.effectsVolume ?? 80,
      controls: customSettings?.controls || "keyboard",
      emoji: defaults.emoji
    };
    
    return config;
  }
  
  // 🎨 Pretty print config
  static displayConfig(config: GameConfig): void {
    console.log(`\n${config.emoji} Game Configuration ${config.emoji}`);
    console.log(`👤 Player: ${config.playerName}`);
    console.log(`🎯 Difficulty: ${config.difficulty}`);
    console.log(`❤️ Lives: ${config.startingLives}`);
    console.log(`🔊 Sound: ${config.soundEnabled ? "ON" : "OFF"}`);
    console.log(`🎵 Music: ${config.musicVolume}%`);
    console.log(`💥 Effects: ${config.effectsVolume}%`);
    console.log(`🎮 Controls: ${config.controls}`);
  }
}

// 🚀 Different game setups
const casualGame = GameSetup.createGame("Alice", "easy");
const normalGame = GameSetup.createGame("Bob");
const hardcoreGame = GameSetup.createGame(
  "Charlie",
  "nightmare",
  { soundEnabled: false, controls: "gamepad" }
);

GameSetup.displayConfig(casualGame);
GameSetup.displayConfig(hardcoreGame);

🚀 Advanced Concepts

🧙‍♂️ Rest Parameters with Defaults

Combine rest parameters with optional/default parameters:

// 🎯 Advanced logging function
function log(
  level: "info" | "warn" | "error" = "info",
  prefix: string = "[LOG]",
  ...messages: unknown[]
): void {
  const emoji = {
    info: "ℹ️",
    warn: "⚠️",
    error: "❌"
  };
  
  const timestamp = new Date().toLocaleTimeString();
  console.log(`${emoji[level]} ${prefix} ${timestamp}:`, ...messages);
}

// 🚀 Usage
log();                                    // ℹ️ [LOG] 10:30:45:
log("info", "[APP]", "Server started");  // ℹ️ [APP] 10:30:45: Server started
log("error", "[DB]", "Connection failed", { code: 500 }); // ❌ [DB] 10:30:45: Connection failed { code: 500 }

🏗️ Builder Pattern with Optional Parameters

Create powerful builders using optional parameters:

// 🏠 Advanced configuration builder
class ApiClientBuilder {
  private config: {
    baseUrl: string;
    timeout?: number;
    headers?: Record<string, string>;
    retries?: number;
    cache?: boolean;
    logger?: (message: string) => void;
  };
  
  constructor(baseUrl: string) {
    this.config = { baseUrl };
  }
  
  // 🔧 Chainable methods with defaults
  withTimeout(timeout: number = 5000): this {
    this.config.timeout = timeout;
    return this;
  }
  
  withHeaders(headers: Record<string, string> = {}): this {
    this.config.headers = { ...this.config.headers, ...headers };
    return this;
  }
  
  withRetries(retries: number = 3): this {
    this.config.retries = retries;
    return this;
  }
  
  withCache(enabled: boolean = true): this {
    this.config.cache = enabled;
    return this;
  }
  
  withLogger(logger?: (message: string) => void): this {
    this.config.logger = logger || console.log;
    return this;
  }
  
  // 🚀 Build final client
  build(): object {
    return {
      ...this.config,
      timeout: this.config.timeout || 5000,
      retries: this.config.retries || 3,
      cache: this.config.cache ?? true,
      emoji: "🌐"
    };
  }
}

// 🎯 Usage
const apiClient = new ApiClientBuilder("https://api.example.com")
  .withTimeout()
  .withRetries(5)
  .withCache()
  .build();

console.log("API Client:", apiClient);

🎨 Generic Functions with Defaults

// 🧬 Generic function with default type parameter
function createCollection<T = string>(
  initialItems: T[] = [],
  maxSize: number = 100
): {
  items: T[];
  add: (item: T) => void;
  remove: (index: number) => void;
  emoji: string;
} {
  return {
    items: [...initialItems],
    add(item: T) {
      if (this.items.length < maxSize) {
        this.items.push(item);
        console.log(`➕ Added item (${this.items.length}/${maxSize})`);
      } else {
        console.log(`❌ Collection full!`);
      }
    },
    remove(index: number) {
      if (index >= 0 && index < this.items.length) {
        this.items.splice(index, 1);
        console.log(`➖ Removed item at index ${index}`);
      }
    },
    emoji: "📦"
  };
}

// 🎮 Usage with different types
const stringCollection = createCollection(); // Default to string
const numberCollection = createCollection<number>([1, 2, 3], 5);
const emojiCollection = createCollection<string>(["🎨", "🚀", "💡"]);

⚠️ Common Pitfalls and Solutions

😱 Pitfall 1: Optional Parameters Order

// ❌ Wrong - optional parameters must come after required ones!
function badFunction(name?: string, age: number): void {
  // TypeScript error: Required parameter cannot follow optional parameter
}

// ✅ Correct - required first, then optional
function goodFunction(age: number, name?: string): void {
  console.log(`Age: ${age}, Name: ${name || "Anonymous"}`);
}

// 🎯 Or use default parameters (can be in any order)
function betterFunction(name: string = "Anonymous", age: number): void {
  console.log(`${name} is ${age} years old`);
}

🤯 Pitfall 2: undefined vs Default Values

// ⚠️ Tricky - passing undefined triggers default, but null doesn't!
function greet(name: string = "Friend"): string {
  return `Hello, ${name}!`;
}

console.log(greet());           // "Hello, Friend!" ✅
console.log(greet(undefined));  // "Hello, Friend!" ✅
console.log(greet(null as any)); // "Hello, null!" 😱

// ✅ Better - handle null explicitly
function safeGreet(name: string | null = "Friend"): string {
  return `Hello, ${name || "Friend"}!`;
}

😵 Pitfall 3: Destructuring with Defaults

// ❌ Confusing - defaults in wrong place
function processUser({ name, age }: { name?: string; age?: number }) {
  // If name/age are undefined, we have no defaults here!
  console.log(`${name} is ${age} years old`); // Could be "undefined is undefined years old" 😱
}

// ✅ Correct - defaults in destructuring
function processUser({
  name = "Anonymous",
  age = 0
}: {
  name?: string;
  age?: number;
} = {}): void {
  console.log(`${name} is ${age} years old`);
}

// 🎯 Even better - use interface
interface UserOptions {
  name?: string;
  age?: number;
  emoji?: string;
}

function createUser({
  name = "Anonymous",
  age = 18,
  emoji = "👤"
}: UserOptions = {}): void {
  console.log(`${emoji} ${name} (${age})`);
}

// Usage
createUser();                          // 👤 Anonymous (18)
createUser({ name: "Alice" });         // 👤 Alice (18)
createUser({ name: "Bob", age: 25, emoji: "🧑‍💻" }); // 🧑‍💻 Bob (25)

🤔 Pitfall 4: Type Inference with Defaults

// ⚠️ Be careful with type inference
function calculate(x = 0, y = 0) {
  // x and y are inferred as number
  return x + y;
}

// ❌ This will cause an error
// calculate("hello", "world"); // Error: string not assignable to number

// ✅ Be explicit when needed
function flexibleCalculate<T>(x: T = 0 as T, y: T = 0 as T): T {
  // More flexible but requires type assertions
  return (x as any) + (y as any);
}

🛠️ Best Practices

1. 🎯 Order Parameters by Importance

// ✅ Good - most important/required first
function sendEmail(
  to: string,
  subject: string,
  body: string,
  cc?: string[],
  attachments?: File[],
  priority: "low" | "normal" | "high" = "normal"
) { /* ... */ }

2. 📝 Use Descriptive Defaults

// ✅ Good - defaults are self-documenting
function createButton(
  text: string,
  style: "primary" | "secondary" | "danger" = "primary",
  size: "small" | "medium" | "large" = "medium",
  disabled: boolean = false
) { /* ... */ }

3. 🛡️ Validate Optional Parameters

// ✅ Good - validate optional inputs
function processPayment(
  amount: number,
  currency: string = "USD",
  description?: string
): void {
  if (amount <= 0) {
    throw new Error("❌ Amount must be positive");
  }
  
  if (description && description.length > 100) {
    console.warn("⚠️ Description truncated to 100 characters");
    description = description.substring(0, 100);
  }
  
  console.log(`💳 Processing ${currency}${amount}`);
}

4. 🎨 Use Object Parameters for Many Options

// ❌ Too many parameters
function createBadUser(
  name: string,
  email?: string,
  age?: number,
  country?: string,
  newsletter?: boolean,
  theme?: string
) { /* ... */ }

// ✅ Better - use options object
interface UserOptions {
  email?: string;
  age?: number;
  country?: string;
  newsletter?: boolean;
  theme?: string;
}

function createGoodUser(name: string, options: UserOptions = {}): void {
  const {
    email = "[email protected]",
    age = 0,
    country = "Unknown",
    newsletter = false,
    theme = "light"
  } = options;
  
  console.log(`👤 Creating user: ${name}`);
}

5. ✨ Document Default Behavior

/**
 * Formats a date string
 * @param date - The date to format
 * @param format - Format string (default: "YYYY-MM-DD")
 * @param locale - Locale for formatting (default: "en-US")
 * @returns Formatted date string
 */
function formatDate(
  date: Date,
  format: string = "YYYY-MM-DD",
  locale: string = "en-US"
): string {
  // Implementation
  return date.toLocaleDateString(locale);
}

🧪 Hands-On Exercise

🎯 Challenge: Build a Flexible API Client

Create a type-safe HTTP client with flexible request options:

📋 Requirements:

✅ Support GET, POST, PUT, DELETE methods
🔧 Optional timeout and retry configuration
🎨 Custom headers with defaults
📊 Request/response logging options
🛡️ Error handling with retries

🚀 Bonus Points:

Add request caching
Implement request queuing
Create response transformers

💡 Solution

🔍 Click to see solution

// 🎯 Flexible HTTP client with optional/default parameters
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

interface RequestOptions {
  headers?: Record<string, string>;
  timeout?: number;
  retries?: number;
  cache?: boolean;
  logLevel?: "none" | "basic" | "verbose";
}

interface ApiResponse<T> {
  data: T;
  status: number;
  cached: boolean;
  duration: number;
}

class ApiClient {
  constructor(
    private baseUrl: string,
    private defaultHeaders: Record<string, string> = {
      "Content-Type": "application/json"
    }
  ) {}
  
  // 🚀 Main request method with flexible options
  async request<T>(
    endpoint: string,
    method: HttpMethod = "GET",
    body?: any,
    options: RequestOptions = {}
  ): Promise<ApiResponse<T>> {
    // 🎨 Merge options with defaults
    const {
      headers = {},
      timeout = 5000,
      retries = 3,
      cache = method === "GET",
      logLevel = "basic"
    } = options;
    
    const url = `${this.baseUrl}${endpoint}`;
    const startTime = Date.now();
    
    // 📝 Logging
    if (logLevel !== "none") {
      console.log(`\n🌐 ${method} ${url}`);
      if (logLevel === "verbose") {
        console.log("📋 Headers:", { ...this.defaultHeaders, ...headers });
        if (body) console.log("📦 Body:", body);
      }
    }
    
    // 🔄 Retry logic
    let lastError: Error | null = null;
    for (let attempt = 0; attempt <= retries; attempt++) {
      try {
        // Simulated fetch (replace with real implementation)
        const response = await this.simulatedFetch<T>(url, {
          method,
          headers: { ...this.defaultHeaders, ...headers },
          body: body ? JSON.stringify(body) : undefined,
          timeout
        });
        
        const duration = Date.now() - startTime;
        
        if (logLevel !== "none") {
          console.log(`✅ Success (${duration}ms)`);
        }
        
        return {
          data: response,
          status: 200,
          cached: false,
          duration
        };
      } catch (error) {
        lastError = error as Error;
        if (attempt < retries) {
          console.log(`⚠️ Attempt ${attempt + 1} failed, retrying...`);
          await this.delay(1000 * (attempt + 1)); // Exponential backoff
        }
      }
    }
    
    throw new Error(`❌ Request failed after ${retries + 1} attempts: ${lastError?.message}`);
  }
  
  // 🎯 Convenience methods with smart defaults
  get<T>(endpoint: string, options?: RequestOptions): Promise<ApiResponse<T>> {
    return this.request<T>(endpoint, "GET", undefined, options);
  }
  
  post<T>(
    endpoint: string,
    data?: any,
    options?: RequestOptions
  ): Promise<ApiResponse<T>> {
    return this.request<T>(endpoint, "POST", data, {
      cache: false,
      ...options
    });
  }
  
  put<T>(
    endpoint: string,
    data?: any,
    options?: RequestOptions
  ): Promise<ApiResponse<T>> {
    return this.request<T>(endpoint, "PUT", data, {
      cache: false,
      ...options
    });
  }
  
  delete<T>(
    endpoint: string,
    options?: RequestOptions
  ): Promise<ApiResponse<T>> {
    return this.request<T>(endpoint, "DELETE", undefined, {
      cache: false,
      ...options
    });
  }
  
  // 🛠️ Helper methods
  private async simulatedFetch<T>(
    url: string,
    options: any
  ): Promise<T> {
    // Simulate network delay
    await this.delay(Math.random() * 1000);
    
    // Simulate successful response
    return { message: "Success!", timestamp: new Date() } as any;
  }
  
  private delay(ms: number): Promise<void> {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

// 🎮 Usage examples
const api = new ApiClient("https://api.example.com");

// Simple GET request with defaults
api.get("/users");

// POST with custom options
api.post(
  "/users",
  { name: "Alice", email: "[email protected]" },
  { timeout: 10000, logLevel: "verbose" }
);

// GET with minimal logging and no retries
api.get("/health", { retries: 0, logLevel: "none" });

// PUT with custom headers
api.put(
  "/users/123",
  { name: "Alice Updated" },
  { headers: { "X-API-Key": "secret" } }
);

🎓 Key Takeaways

You’ve mastered optional and default parameters! Here’s what you can now do:

✅ Create flexible functions that adapt to different use cases 💪
✅ Set smart defaults that make APIs intuitive 🛡️
✅ Combine optional and default parameters effectively 🎯
✅ Avoid common pitfalls with parameter ordering 🐛
✅ Build user-friendly APIs that developers love! 🚀

Remember: Good defaults make happy developers! Your functions should be easy to use for simple cases but flexible enough for complex ones. 🤝

🤝 Next Steps

Congratulations! 🎉 You’ve mastered optional and default parameters!

Here’s what to do next:

💻 Complete the API client exercise above
🏗️ Refactor existing functions to use better defaults
📚 Move on to our next tutorial: Rest Parameters and Spread Operator
🌟 Create a library with a beautifully flexible API!

Remember: The best APIs feel natural to use. With optional and default parameters, you’re building functions that are a joy to work with! 🚀

Happy coding! 🎉🚀✨

Prerequisites

What you'll learn