[JS] Maximum call stack size exceeded 에러

들어가며

자바스크립트를 통해 코드를 자다 보면 종종 'RangeError: Maximum call stack size exceeded'라는 에러 메시지를 볼 수 있는데요.

이번 시간에는 이 에러의 원인과 해결 방법에 대해 알아보도록 하겠습니다.

 

원인과 해결방법

이 에러는 설명 그대로 최대 콜 스택 크기를 초과할 때 발생합니다. 자바스크립트 엔진은 함수를 호출할 때마다 '콜 스택'이라는 곳에 해당 함수 호출을 추가하고, 실행을 완료하면 제거하는데요. 이렇게 하나하나 쌓이는 걸 스택 프레임이라고 합니다. 이 스택 프레임이 너무 많이 쌓여 콜스택이 감당할 수 있는 최대 크기를 넘어서게 되면 문제가 발생합니다. 이 크기는 사용하는 엔진과 환경에 따라 달라질 수 있습니다.

 

주로 다음과 같은 경우에 발생합니다.

 

1. 함수에 너무 많은 인자를 넘겨줄 경우

함수에 너무 많은 인자를 넘겨주게 되면 스택 프레임의 크기가 커져 최대 콜스택 크기를 초과할 수 있습니다.

 

예를 들어, 크기가 너무 큰 배열의 최댓값을 Math.max()를 통해 찾고자 할 때 문제가 발생할 수 있습니다.

// 크기가 200,000인 배열 A의 최댓값을 찾는 경우, 문제가 발생할 수 있음
const max = Math.max(...A)

 

이 경우 다음과 같이 해결할 수 있습니다.

// 크기가 200,000인 배열 A의 최댓값을 찾는 경우에도 문제가 발생하지 않음
function getMax(arr) {
    return arr.reduce((max, v) => max >= v ? max : v, -Infinity);
}

const max = getMax(A);

 

 

2. 함수 호출이 너무 많을 경우

아마 대부분의 경우에 해당하지 않을까 싶은데요. 특히 재귀 호출 관련 로직을 짜는 경우에 주로 발생하곤 합니다. 너무 많은 함수 호출이 발생하면, 콜스택에 함수 호출이 쌓이기만 하고 제거되지 않아 최대 콜스택 크기를 초과할 수 있습니다. 

 

예를 들어, n번째 피보나치 수를 찾는 문제를 재귀를 통해 해결할 때, n이 너무 크다 보면 문제가 발생할 수 있습니다.

// n이 50인 경우 문제가 발생할 수 있음
function fibonacci(n) {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

 

이 경우 다음과 같이 해결할 수 있습니다.

// n이 50인 경우에도 문제가 발생하지 않음
function fibonacci(n) {
  const dp = [0, 1, 1];

  for (let i = 3; i <= n; i++) {
    dp[i] = dp[i - 1] + dp[i - 2];
  }

  return dp[n];
}

 

마치며

'Maximum call stack size exceeded' 에러는 자바스크립트에서 종종 발생할 수 있는데요. 이 에러를 예방하기 위해서는 함수에 전달되는 인자의 수를 줄이고, 재귀 함수 호출을 줄이거나 반복문을 사용하는 것이 중요합니다. 무엇보다 콜 스택에 대한 이해가 충분히 되어야 할 것 같습니다.

 

지적이나 다른 의견은 언제나 환영합니다 :D

감사합니다.

 

References

https://stackoverflow.com/questions/42623071/maximum-call-stack-size-exceeded-with-math-min-and-math-max

https://stackoverflow.com/questions/22123769/rangeerror-maximum-call-stack-size-exceeded-why/53493938