JavaScript의 최대 호출 스택 크기 초과 오류
호출이 최대 호출 스택 제한을 초과할 정도로 함수가 여러 번 호출되면 JavaScript의 최대 호출 스택 크기 초과 오류가 발생합니다.
JavaScript의 최대 호출 스택 크기 초과 오류가 발생하면 JavaScript 코드 내의 재귀 함수에 문제가 있는 것입니다. 특히 문제는 자신을 반복해서 호출하는 함수에 있습니다.
JavaScript의 ‘최대 호출 스택 크기 초과’ 오류
이 오류가 발생하면 브라우저 내에서 사용 가능한 모든 호출 스택을 소모하는 코드 조각을 수정하기 위해 취할 수 있는 몇 가지 단계가 있습니다.
이 JavaScript 문서의 도움으로 최대 호출 스택 크기 초과 오류가 표시되는 이유와 이를 해결하기 위해 수행할 수 있는 작업에 대해 자세히 설명합니다.
모든 JavaScript 오류 개체는 Error 개체에서 파생되거나 상속됩니다. 이를 RangeError라고 합니다.
RangeError는 종종 코드 매개변수의 인수 값을 벗어난 오류를 나타냅니다.
이제 이 오류가 JavaScript 오류 범위 내에서 어느 부분에 속하는지 알았으므로 최대 호출 스택 크기 초과 오류의 원인을 계속 살펴보겠습니다.
그래도 최대 호출 스택 크기 초과 오류를 이해하기 전에 재귀를 이해해야 합니다.
JavaScript의 재귀 함수
재귀는 정의된 함수가 자신을 호출하는 패턴으로 각 반복 이동 조건은 함수 호출에서 벗어날 수 있는 기본 사례에 더 가깝습니다. 그러나 주의하지 않으면 브라우저 스택이 고갈될 때까지 함수가 계속해서 자신을 호출할 수 있습니다.
재귀 함수의 최대 호출 스택 크기 초과 오류의 가장 일반적인 원인은 기본 사례의 문제 또는 기본 사례의 부족입니다. 재귀 코드에 기본 코드가 없거나 지나치면 브라우저의 최대 호출 스택에 도달할 때까지 계속 호출합니다.
JavaScript에서 재귀 함수 수정
계속해서 자신을 호출하는 재귀 함수의 문제는 체인 내에서 다음 함수로 이동하는 것이 불가능하고 스택 전체를 소모하게 된다는 것입니다.
재귀 함수를 다시 확인하는 것이 이 문제를 방지하는 가장 좋은 방법입니다. 그런 다음 문제를 해결하기 위해 재귀를 종료하기 위해 충족되어야 하는 기본 사례를 지정합니다.
아래 스크린샷은 재귀 코드가 자신을 무기한 호출할 때의 모습을 보여줍니다.
function example() {
// RangeError: Maximum call stack size exceeded
example();
}
example();
호출 스택 제한을 초과할 때까지 자신을 호출하는 함수를 호출할 수 있습니다. 그런 다음 오류를 해결하기 위해 함수가 자신을 호출하는 것을 중지하는 조건을 지정해야 합니다.
let counter = 0;
function example(num) {
if (num < 0) {
return;
}
counter += 1;
example(num - 1);
}
example(4);
console.log(counter);
이번에는 모든 호출에서 0보다 작은 숫자로 함수가 호출되었는지 확인합니다. 숫자가 0보다 작으면 함수에서 반환되므로 호출 스택의 제한을 초과하지 않습니다.
전달된 값이 0보다 작지 않으면 전달된 값(1)을 사용하여 함수를 호출합니다. 이렇게 하면 if 검사가 충족되는 경우로 계속 이동할 수 있습니다.
재귀 함수는 조건이 충족될 때까지 계속 자신을 호출합니다. 예를 들어 함수를 완료하기 위한 조건이 없으면 최대 호출 스택 크기를 초과할 때까지 자신을 호출합니다.
함수를 호출하는 무한 루프가 있는 경우 이 오류가 발생합니다.
function sum(x, y) {
return x + y;
}
while (true) {
sum(10, 10);
}
while 루프는 함수를 계속 호출하고 루프를 종료하는 조건이 없기 때문에 결국 호출 스택 크기를 초과하게 됩니다.
이는 기본 조건 없이 자신을 호출하는 함수와 유사하게 동작합니다. 예를 들어 for 루프를 사용한 경우에도 마찬가지입니다.
다음은 루프를 종료하기 위해 충족해야 하는 조건을 지정하는 방법의 예입니다.
function sum(x, y) {
return x + y;
}
let total = 0;
for (let i = 10; i > 0; i--) {
total += sum(5, 5);
}
console.log(total);
for 루프의 조건은 i 변수가 0 이하인 경우 충족되지 않습니다. 따라서 루프를 종료합니다.
JavaScript에서 오류 찾기
로그를 살펴보는 것은 오류를 찾는 첫 번째 단계이지만 수천 줄의 코드로 작업할 때 깨진 코드 한 줄을 찾는 것은 어려울 수 있습니다.
동일한 페이지에서 jQuery 스크립트를 여러 번 로드하는 경우와 같이 동일한 페이지에서 동일한 파일을 여러 번 가져오는 경우에도 오류가 발생할 수 있습니다. 브라우저의 개발자 도구에서 네트워크 탭을 열고 페이지를 새로고침하여 웹사이트에 로드된 스크립트를 확인하십시오.