Sentry Answers>JavaScript>

Default function parameter values in JavaScript

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.

Click to Copy
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

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:

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

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:

Click to Copy
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

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

Click to Copy
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."
  • YoutubeHow Sentry.io saved me from disaster
  • ResourcesImprove Web Browser Performance - Find the JavaScript code causing slowdowns
  • SentryJavascript Error Monitoring & Tracing
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2024 • Sentry is a registered Trademark of Functional Software, Inc.