JavaScript: Define a Function with Default Parameters

Introduction

In JavaScript, you can assign a default value to a function parameter so that it will be used if no value or undefined is passed as an argument. This can be useful for avoiding errors or providing sensible defaults for optional parameters.

Default parameters for functions were introduced in ECMAScript 2015 (also known as ES6), which was a major update to JavaScript that added many new features and syntax improvements. Before that point, developers had to use various workarounds to achieve the same functionality, such as testing parameter values in the function body and assigning default values if they are undefined.

Syntax

Using an equal sign

This is the standard way to set default parameters for a function in JavaScript:\

function functionName(
   parameter1 = defaultValue1, 
   parameter2 = defaultValue2, 
   ...) 
{
  // function body
}

A function can have both parameters without default values and parameters with default values. If this is the case, you should put the parameters with default values at the end of the parameter list. This way, you can omit them when calling the function without affecting the other parameters.

function functionName(
    parameter1,
    parameter2,
    parameter3 = defaultValue3, 
    parameter4 = defaultValue4) 
 {
   // function body
 }

Using restructuring assignment

You can use destructuring assignment to extract the properties of an object as parameters and assign them default values. You can also assign a default value to the object argument itself by using an equal sign (=) followed by an empty object ({}) after the object parameter name. This way, you can avoid errors or undefined values when accessing the properties of the object.

function functionName(
  {
     property1 = defaultValue1, 
     property2 = defaultValue2, 
     ...
   } = {}
) 
{
  // function body
}

Examples

Creating an arrow function with default parameters

The code:

// This function calculates the sum of two numbers
const add = (a = 0, b = a) => a + b;

// Call the function with different arguments
console.log(add(2, 3)); 
console.log(add(2)); 
console.log(add());

Output:

5
4
0

Using a JavaScript expression as a default value

You can use any valid JavaScript expression as a default value for a parameter. For instance, you can use a variable, a constant, a literal, an operator, a function call, or another parameter.

Example:

// Define some variables and constants
const PI = 3.14;
let radius = 5;

// Define a function with expressions as default parameters
function calculateArea(r = radius, pi = PI) {
  return r * r * pi;
}

// Call the function with different arguments
console.log(calculateArea()); // 78.5
console.log(calculateArea(10)); // 314
console.log(calculateArea(10, 22/7)); // 314.2857142857143

Calculating the discount price

This example calculates the discount price of a product with a given price and discount rate. If no discount rate is provided, the default value will take the place.

// Define a function with one default parameter
const calculateDiscount = (price, discount = 0.1) => {
  return price - price * discount;
}

// Call the function with different arguments
console.log(calculateDiscount(100, 0.2)); // 80
console.log(calculateDiscount(50)); // 45
console.log(calculateDiscount(100)); // 90

The parameter discount has a default value of 0.1, which means 10%.