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.
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
Fixed Code be using setTimeout() function
- Workraound : use setTimeout() function
- setTimeout() function always creates a Top Level Function
- Output of fixed Code
- Note: The setTimeout() Workaorund is very slow
References
- Recursion Details
- JsFiddle Code [ Tested with Google Chrome Browser ]