Understanding Optional Parameters in TypeScript: When to Use the Question Mark

• The question mark ( ? ) after a parameter name in TypeScript signifies that the parameter is optional. This means you can call the function without providing a value for that parameter.

Behavior:

• When you omit an optional parameter during a function call, its value becomes undefined by default.
• You can still access the optional parameter within the function body, but you'll need to check if it has a value before using it (often done with an if statement).

Example:

function greet(name?: string) { // "name" is optional
  if (name) {
    console.log("Hello, " + name + "!");
  } else {
    console.log("Hello, world!");
  }
}

greet(); // Output: "Hello, world!" (no name provided)
greet("Alice"); // Output: "Hello, Alice!"

Benefits of Optional Parameters:

• Makes functions more flexible by allowing them to handle cases where certain arguments might not be necessary.
• Improves code readability by clearly indicating which parameters are optional.

Example Use Case:

Imagine a function that displays a user's profile information. You might want to make the lastName parameter optional, as not all users might have a last name:

function showProfile(firstName: string, lastName?: string) {
  console.log("Name:", firstName);
  if (lastName) {
    console.log("Last Name:", lastName);
  }
}

While the omitted optional parameter becomes undefined by default, you can also provide a default value:

function setFontSize(size: number = 16) { // "size" has a default value of 16
  console.log("Font size set to:", size);
}

setFontSize(); // Output: "Font size set to: 16" (default value used)
setFontSize(20); // Output: "Font size set to: 20"

Multiple Optional Parameters:

You can have multiple optional parameters in a function:

function calculateArea(width?: number, height?: number) {
  if (width && height) {
    console.log("Area:", width * height);
  } else {
    console.log("Insufficient arguments to calculate area.");
  }
}

calculateArea(); // Output: "Insufficient arguments to calculate area."
calculateArea(10); // Output: "Insufficient arguments to calculate area."
calculateArea(10, 5); // Output: "Area: 50"

Rest Parameters with Optional Parameters:

Combine optional parameters with rest parameters (...) to capture an indefinite number of arguments:

function printArguments(message: string, ...args: any[]) {
  console.log(message + ":", args);
}

printArguments("Hello"); // Output: "Hello: []" (empty array)
printArguments("Numbers:", 1, 2, 3); // Output: "Numbers: [1, 2, 3]"
printArguments("Mixed:", "apple", 42, true); // Output: "Mixed: ["apple", 42, true]"

• Not directly supported in TypeScript, but you can mimic it using interfaces or unions.
• Useful when you have a function with fundamentally different behaviors depending on the number and types of arguments provided.

Example (Using Interfaces):

interface GreetSimple {
  (name: string): void;
}

interface GreetFull {
  (name: string, lastName: string): void;
}

function greet(name: string | { name: string, lastName?: string }): void {
  if (typeof name === "string") {
    console.log("Hello, " + name + "!");
  } else {
    console.log("Hello, " + name.name + " " + (name.lastName || ""));
  }
}

const simpleGreet: GreetSimple = greet;
simpleGreet("Alice"); // Output: "Hello, Alice!"

greet({ name: "Bob", lastName: "Smith" }); // Output: "Hello, Bob Smith"

This approach defines separate interfaces for different function signatures and then uses a type guard (typeof name === "string") within the function body to determine the correct behavior.

Default Values (Similar to Optional Parameters with Defaults):

• While question mark syntax provides default values for optional parameters, you can also achieve the same effect by assigning a default value during parameter declaration.
• This might be a cleaner syntax for simple default values.

function showMessage(message = "Default message") {
  console.log(message);
}

showMessage(); // Output: "Default message"
showMessage("Custom message"); // Output: "Custom message"

Union Types (for Alternative Argument Types):

• Useful when a parameter can accept different types of values.
• Not necessarily an alternative for optional parameters, but can be used in specific scenarios.

function formatValue(value: string | number): string {
  if (typeof value === "string") {
    return value.toUpperCase();
  } else {
    return value.toString();
  }
}

console.log(formatValue("hello")); // Output: "HELLO"
console.log(formatValue(42)); // Output: "42"