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

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

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

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."

Get Started With Sentry

Get actionable, code-level insights to resolve JavaScript performance bottlenecks and errors.

  1. Create a free Sentry account

  2. Create a JavaScript project and note your DSN

  3. Grab the Sentry JavaScript SDK

<script src="https://browser.sentry-cdn.com/7.112.2/bundle.min.js"></script>
  1. Configure your DSN
Sentry.init({ dsn: 'https://<key>@sentry.io/<project>' });

Loved by over 4 million developers and more than 90,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.

Share on Twitter
Bookmark this page
Ask a questionJoin the discussion

Related Answers

A better experience for your users. An easier life for your developers.

    TwitterGitHubDribbbleLinkedinDiscord
© 2024 • Sentry is a registered Trademark
of Functional Software, Inc.