Default Parameter Values

Part of the Introduction To TypeScript section of Coddy's JavaScript journey — lesson 26 of 73.

While optional parameters let you choose whether to provide a value, default parameters take this concept further by automatically providing a fallback value when no argument is passed. This makes functions more convenient to use while maintaining type safety.

To create a default parameter, you assign a value directly in the function signature using the equals sign. TypeScript automatically infers the parameter's type from the default value:

function greet(name: string, greeting = "Hello"): string {
  return greeting + ", " + name;
}

function calculateArea(width: number, height = 10): number {
  return width * height;
}

In these examples, greeting defaults to "Hello" (inferred as string) and height defaults to 10 (inferred as number). When you call greet("Alice"), it automatically uses the default greeting, but you can still override it with greet("Alice", "Good morning").

Default parameters are effectively optional - you don't need to use the ? syntax because the default value ensures the parameter always has a value. This approach is cleaner than optional parameters when you have a sensible default, as it eliminates the need to check for undefined inside your function.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Challenge

Easy

Create a function named calculateTax that takes two parameters: price of type number (required) and rate of type number with a default value of 0.05. The function should return the tax amount as a number with an explicit return type annotation.

The function should calculate the tax by multiplying the price by the rate.

Create another function named formatGreeting that takes two parameters: name of type string (required) and timeOfDay of type string with a default value of "Hello". The function should return a formatted greeting string with an explicit return type annotation.

The function should return the greeting in the format: "[timeOfDay], [name]!"

Create a third function named calculateShipping that takes three parameters: weight of type number (required), distance of type number (required), and expedited of type boolean with a default value of false. The function should return the shipping cost as a number with an explicit return type annotation.

The function should calculate shipping cost using this formula: (weight * 0.5) + (distance * 0.1). If expedited is true, multiply the result by 2.

Test your functions by calling them with the following values and printing the results:

Call calculateTax with 100 (using default rate)
Call calculateTax with 200 and 0.08
Call formatGreeting with "Alice" (using default time of day)
Call formatGreeting with "Bob" and "Good morning"
Call calculateShipping with 5 and 100 (using default expedited value)
Call calculateShipping with 3, 50, and true

Print each result on a separate line in the order specified above.

Cheat sheet

Default parameters provide fallback values when no argument is passed, making functions more convenient while maintaining type safety.

Create default parameters by assigning a value in the function signature using the equals sign. TypeScript automatically infers the parameter's type from the default value:

function greet(name: string, greeting = "Hello"): string {
  return greeting + ", " + name;
}

function calculateArea(width: number, height = 10): number {
  return width * height;
}

Default parameters are effectively optional - you don't need the ? syntax because the default value ensures the parameter always has a value. This eliminates the need to check for undefined inside your function.

Try it yourself

// TODO: Write your code here

// Create the calculateTax function


// Create the formatGreeting function


// Create the calculateShipping function


// Test the functions and print results

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.