Default function parameter values in JavaScript

David Y.

The Problem

Consider the code below for evaluating a home loan application. Applicants for the loan must provide their income and can optionally provide a deposit to reduce the total amount of the loan.

const homeCost = 1000000;
const loanPeriods = 240;

function evaluateHomeLoanApplication(name, income, deposit) {
  const approvalThreshold = (homeCost - deposit) / loanPeriods;
  if (income >= approvalThreshold) {
    console.log(`Loan application for ${name} approved.`);
  } else {
    console.log(`Loan application for ${name} denied.`);
  }
}

evaluateHomeLoanApplication("John Smith", 4200); // application denied
evaluateHomeLoanApplication("Jane Doe", 4000, 100000); // application approved
Click to Copy

The first loan application will be denied, even though John Smith’s income is enough to cover the repayment. Why does this happen and how can we fix it?

The Solution

When an argument is omitted from a function call, it will be given a value of undefined. This causes our loan evaluation function above to attempt the following calculation:

const approvalThreshold = (1000000 - undefined) / 240
Click to Copy

This will produce a result of NaN, leading our code to deny the loan even though the income value provided is sufficient.

One way to avoid this would be to always specify a value of 0 for deposit in our function call. A better way would be to assign a default value for deposit, as below:

const homeCost = 1000000;
const loanPeriods = 20 * 12;

function evaluateHomeLoanApplication(name, income, deposit = 0) {
  const approvalThreshold = (homeCost - deposit) / loanPeriods;
  if (income >= approvalThreshold) {
    console.log(`Loan application for ${name} approved.`);
  } else {
    console.log(`Loan application for ${name} denied.`);
  }
}

evaluateHomeLoanApplication("Jane Doe", 4200); // application approved
evaluateHomeLoanApplication("Jane Doe", 4000, 100000); // application approved
Click to Copy

Parameters with default values should be included after parameters without default values. Default values can include the values of previously defined parameters, as below:

function submitLoanApplication(name, message = `Your loan application has been submitted, ${name}.`) {
  console.log(message);
}

submitLoanApplication("Jane Doe"); // will print "Your loan application has been submitted, Jane Doe."
submitLoanApplication("John Smith", "A custom message."); // will print "A custom message."
Click to Copy