How to Fix Maximum Call Stack Size Exceeded Error in JavaScript

1. Maximum call stack size exceeded Error in JavaScript
2. Recursive Function in JavaScript
3. Fix a Recursive Function in JavaScript
4. Find the Error in JavaScript

The JavaScript’s Maximum call stack size exceeded error occurs when a function is called so many times that the invocations exceed the maximum call stack limit.

If the JavaScript’s Maximum call stack size exceeded error occurs, the problem lies with the recursive function within your JavaScript code. More particularly, the problem is with the function, which keeps calling on itself repeatedly.

Maximum call stack size exceeded Error in JavaScript

When this error occurs, there are several steps you can take to fix the piece of code that is eating up all the available call stacks within a browser.

With the help of this JavaScript article, you will go over in great detail why a Maximum call stack size exceeded error shows up and what you can do to fix it.

All JavaScript error objects are descended from or inherited from the Error object. This is referred to as a RangeError.

A RangeError often indicates an error outside a code’s parameter’s argument value.

Now that you know a bit of where this error falls within the scope of JavaScript errors let’s continue to what causes the Maximum call stack size exceeded error.

Still, you need to understand recursion before understanding the Maximum call stack size exceeded error.

Recursive Function in JavaScript

Recursion is a pattern in which a defined function calls itself, with each iteration moving conditions closer to a base case that allows an escape from the function calls. However, if you’re not careful, a function can continuously call itself until the browser’s stack is depleted.

The most common cause of a recursive function’s Maximum call stack size exceeded error is a problem with the base case or the lack thereof. When recursive code doesn’t have its base code or shoots past it, it will keep calling itself until the browser’s Maximum Call Stack is reached.

Fix a Recursive Function in JavaScript

The issue with a recursive function that continues to call on itself is that it is impossible to move on to the following function within a chain, and you’ll eat up the entirety of your stack.

Double-checking your recursive functions is the best approach to avoid this issue. Then, to solve the problem, specify a base case that must be satisfied to exit the recursion.

The screenshot below shows what recursive code looks like when it calls on itself indefinitely.

function example() {
  // RangeError: Maximum call stack size exceeded
  example();
}
example();

You can call the function, which calls itself until the call stack limit is exceeded. After that, you must specify a condition where the function stops calling itself to solve the error.

let counter = 0;

function example(num) {
  if (num < 0) {
    return;
  }

  counter += 1;
  example(num - 1);
}

example(4);

console.log(counter);

This time you will check if the function was invoked with a number that is less than 0 on every invocation. If the number is less than 0, you will return from the function, so you do not exceed the call stack’s limit.

If the passed-in value is not less than zero, you will call the function with the passed-in value, which is 1. This will keep you moving toward the case where the if check is satisfied.

A recursive function keeps on calling itself until a condition is met. For example, if there is no condition to complete your function, it will call itself until the maximum call stack size is exceeded.

You’ll receive this error if you have an infinite loop that calls a function.

function sum(x, y) {
  return x + y;
}

while (true) {
  sum(10, 10);
}

The while loop will keep calling the function, and since you don’t have a condition that would exit the loop, you will eventually exceed the call stack size.

This behaves similarly to a function that calls itself without a base condition. For example, the same would be the case if you used a for loop.

Below is an example of how you can specify a condition that must be met to exit the loop.

function sum(x, y) {
  return x + y;
}

let total = 0;

for (let i = 10; i > 0; i--) {
  total += sum(5, 5);
}

console.log(total);

The condition in the for loop will not be satisfied if the i variable is equal to or less than 0; thus, you will leave the loop.

Find the Error in JavaScript

Going through your logs is the first step in finding an error, but finding that one line of broken code can be difficult when working with thousands of lines of code.

The error can also occur if you import the same file many times on the same page, such as when you load the jQuery script numerous times on the same page. Open the Network tab in your browser’s developer tools and refresh the page to see which scripts are loaded on your website.