How to avoid maximum call stack size exceeded JavaScript?

The "Uncaught RangeError: Maximum call stack size exceeded" error occurs in JavaScript when you don't specify an exit condition for your recursive function. Take the following as an example:

const test = () => test()

// ❌ This will throw "Uncaught RangeError: Maximum call stack size exceeded"
test()

Copied to clipboard! Copy

This function will call itself indefinitely, causing the "Maximum call stack size exceeded" error. You may also come across this error in other forms, such as the below, but the cause will be the same.

"Uncaught InternalError: Too much recursion"

To fix the error, we will need to provide an exit condition. You can do this by wrapping the call inside a conditional statement. Take the following code as an example:

const countDown = num => {
    if (num > 0) {
        console.log(num)
        countDown(num - 1)
    }
}

Copied to clipboard! Copy

This is also a recursive function that calls itself and will log out numbers until it reaches 0. Notice that we call the function with the "same argument - 1". This means that at a certain call, the condition will not be met, meaning we will stop executing the function. This way, we won't reach the maximum call stack size, as we have an exit condition.

Looking to improve your skills? Check out our interactive course to master JavaScript from start to finish.

How to avoid maximum call stack size exceeded JavaScript?

Infinite loops

The "Maximum call stack size exceeded" error can not only happen with recursive functions, but with infinite loops as well. Most commonly, this can happen while using a while loop.

A common way to ensure that your while loop has an exit condition is to decrement a value at each iteration. Take a look at the following example:

i = 100

while (i--) {
    console.log(i)
}

Copied to clipboard! Copy

Once i reaches 0, it will be evaluated as false, meaning we will stop executing the while loop. In this case, this is our exit condition.

Table of Contents

Overview

  • Error Maximum call stack size exceeded  is raised when calling a recursive function in a  loop
  •  This is expected – as every Javascript Engine has a maximum Call Stack Range

Failing Javascript Code

function errorFunc(rc) {
    var runCount = rc;
  var maxCount = 100000;
  if ( (rc % 5000) === 0 ) {
    logMessage("errorFunc():: Recursion Count:  " + runCount );
  } 
  runCount++;
  if (runCount >= maxCount ) {
      logMessage("errorFunc() reached MAX recursion Count :  " + runCount );
    return;
  }
  try {
      errorFunc(runCount);
      } catch (e ) {
        if ( e instanceof RangeError) {
            logMessage("errorFunc():: " + e +  ": " + runCount );
        }
      }
};

  • Output

How to avoid maximum call stack size exceeded JavaScript?

Fixed Code be using setTimeout() function

  • Workraound : use setTimeout() function
  • setTimeout() function always creates a Top Level Function
function     workingFunc(rc) {
    // logMessage("workingFunc()");
  var runCount = rc;
  var maxCount = 100000;
  if ( (rc % 20000) === 0 ) {
    logMessage("workingFunc():: Recursion Count:  " + runCount );
  } 
  runCount++;
  if (runCount >= maxCount ) {
      logMessage("workingFunc() reached MAX recursion Count :  " + runCount );
    return;
  }
 
  try {
      setTimeout( workingFunc, 0, runCount);
      } catch (e ) {
        if ( e instanceof RangeError) {
            logMessage("workingFunc():: " + e +  ": " + runCount );
        }
      }
  };
  • Output of fixed Code
    How to avoid maximum call stack size exceeded JavaScript?
  • Note: The setTimeout() Workaorund is very slow

References

  • Recursion Details 
  • JsFiddle Code [ Tested with Google Chrome Browser ]

 

How do I get rid of maximum call stack size exceeded?

How to fix: "RangeError: Maximum call stack size exceeded".
Avoid creating infinite loops by including a way to exit the loop. ... .
Avoid creating deeply nested recursive functions by including a way to exit the recursion. ... .
Avoid creating deeply nested recursive functions by using an iterative approach instead..

What is maximum call stack exceeded in JavaScript?

If you see the “Maximum Call Stack Size Exceeded” error, there's likely a problem with a recursive function within your JavaScript code. More specifically, the issue lies with the function calling on itself indefinitely.

What does maximum call stack size exceeded mean?

The JavaScript exception "too much recursion" or "Maximum call stack size exceeded" occurs when there are too many function calls, or a function is missing a base case.

What is maximum call stack size exceeded regex?

"Maximum call stack size exceeded" tells you, that there are too many stored execution contexts (= function calls) - which most likely happens in recursive functions. But in your case its the sheer amount of chained . replace() calls.