Building a Loan Repayment Calculator with JavaScript

#frontend #javascript #tutorial

A loan calculator is a useful project for learning how to combine mathematics, input validation, and frontend programming.

In this tutorial, we'll implement a monthly repayment function for a loan with a fixed interest rate and regular monthly repayments.

The example is for educational purposes. It does not include every fee, product condition, or circumstance that can affect a real loan.

1. Understand the Formula

For a loan with a positive monthly interest rate, the standard repayment formula is:

[
M = \frac{P r(1+r)^n}{(1+r)^n-1}
]

Where:

(M) is the monthly repayment.
(P) is the principal.
(r) is the monthly interest rate as a decimal.
(n) is the total number of monthly repayments.

For a nominal annual interest rate expressed as a percentage:

[
r = \frac{\text{annual rate}}{100 \times 12}
]

When the interest rate is zero, the principal can simply be divided by the number of repayments.

2. Implement the Function

function calculateMonthlyRepayment(
  principal,
  annualRatePercent,
  years
) {
  const values = [principal, annualRatePercent, years];

  if (!values.every(Number.isFinite)) {
    throw new Error("Inputs must be finite numbers.");
  }

  if (
    principal <= 0 ||
    annualRatePercent < 0 ||
    years <= 0
  ) {
    throw new Error("Invalid loan inputs.");
  }

  const months = years * 12;

  if (!Number.isInteger(months)) {
    throw new Error("The term must produce whole months.");
  }

  const monthlyRate = annualRatePercent / 100 / 12;

  if (monthlyRate === 0) {
    return principal / months;
  }

  const growth = Math.pow(1 + monthlyRate, months);

  return (
    principal * monthlyRate * growth / (growth - 1)
  );
}

The function validates its inputs and handles a zero interest rate separately.

3. Try an Example

const payment = calculateMonthlyRepayment(
  400000,
  6,
  30
);

console.log(payment.toFixed(2));

This example assumes a principal of $400,000, a nominal annual interest rate of 6%, and a 30-year term. The output is an estimated monthly repayment before additional costs.

4. Add Unit Tests

Basic tests help confirm that the function behaves as expected.

console.assert(
  calculateMonthlyRepayment(1200, 0, 1) === 100
);

console.assert(
  calculateMonthlyRepayment(400000, 6, 30) > 0
);

console.assert(
  calculateMonthlyRepayment(400000, 6, 30) < 400000
);

For a real project, use a test framework such as Vitest or Jest and verify results against independently calculated examples.

5. Production Considerations

A production calculator should account for input formatting, currency precision, fees, rate changes, and the actual repayment rules of the relevant loan product.

Also validate empty form fields explicitly. In JavaScript, converting an empty string with Number() produces zero, which can create unexpected behaviour if the form does not distinguish empty input from a genuine zero.

For financial software, make assumptions visible rather than presenting an estimate as a guaranteed repayment amount.

Conclusion

A loan calculator is a practical example of how mathematical logic becomes a working web feature.

By separating the calculation from the user interface and testing edge cases, developers can create code that is easier to understand, maintain, and extend.

DEV Community