[JavaScript] 호출 스택 (Call Stack)

안녕하세요. 성조입니다.

 

이번 포스팅은 호출 스택(Call Stack) 개념에 대해서 정리해 보려 합니다.

혹여나 잘못된 지식을 전달했다고 생각하시면 언제든지 댓글로 피드백 남겨주시면 감사드리겠습니다!

---

호출 스택(Call Stack)이란?

호출 스택은 MDN 홈페이지에 다음과 같이 나와있다.

"호출 스택은 여러 함수들(functions)을 호출하는 스크립트에서 해당 위치를 추적하는 인터프리터(웹 브라우저의 자바스크립트 인터프리터 같은 것.)를 위한 메커니즘입니다."

 

 

[본인 의견]

프로그램에서 함수의 호출 순서를 추적하는 데이터 구조이다.

 

호출 스택은 현재 어떤 함수가 실행되고 있는지, 그 함수 내부에서 그리고 다음에 어떤 함수가 존재하는지 판별하여 제어한다. 즉, 함수가 동작하면서 다음 함수가 있거나 없거나를 제어한다.

만약 A(B(C))의 구조로 데이터가 존재한다. A 내부에 B가 존재하고, B 내부에 C가 존재하면 A를 부르면 A, B, C를 모두 부르게 될 것이다. 이때 데이터가 쌓이고, 출력되는 영역이 호출 스택(Call Stack)이다.

호출 스택(Call Stack)은 함수 호출의 순서를 추적하고, 오류를 디버깅하는데 중요한 역할을 해준다.

 

 

 

호출 스택(Call Stack) 작동 원리

[팬케이크 예시]

출처 : (캔바 Pro 구독)

위 사진은 팬케이크다. 조금 뜬금없지만 사진처럼 접시 위에 팬케이크가 쌓여있을 때.

접시에 있는 팬케이크를 모두 먹으려면 맨 위 있는 팬케이크부터 아래까지 먹는 것이 일반적이다.

호출 스택(Call Stack)이란 것도 동일하다.

함수라는 팬케이크를 접시라는 공간에 쌓는다.

함수 호출 즉, 팬케이크를 다 만들었고 더 이상 쌓을 것이 없을 때. 접시 위에 있는 팬케이크를 위에서부터 아래로 하나씩 먹어가는 것이 프로그래밍에서 활용되는 호출 스택(Call Stack)이다.

팬케이크를 다 만들었다면(더 이상 호출할 함수가 없다면) 쌓는 것이 완료됐을 때 위에서부터 하나씩 먹으면서 내려가게 되는 것이다.

 

 

[프로그래밍에서 작동 원리와 예제]

호출 스택(Call Stack) 간단 구조

호출 스택(Call Stack)은 자료구조의 스택(Stack)이라는 데이터 구조를 활용하는데 스택이라는 구조를 이미 알고 있는 사람이라면 동작 원리에 대해서는 이미 많은 부분을 알고 있다고 생각한다. 그래도 모르는 분을 위해서 조금 더 얘기해 보려 한다.

 

스택(Stack) 데이터 자료 구조의 경우 LIFO(Last-In-Frist-Out) 원칙으로 나중에 들어간 것이 먼저 나오는 형태를 가지고 있다.

동작 과정을 코드로 정리하고, 실행하면 다음과 같은 단계로 진행된다.

function firstFunction() {
  secondFunction();
}

function secondFunction() {
  thirdFunction();
}

function thirdFunction() {
  console.log("호출 스택(Call Back)");
}

firstFunction();

1. 처음 자바스크립트를 실행하면 스택 영역이 비어있고 'firstFunction()'를 실행한다.

2. 'firstFunction()'을 호출하여 스택에 추가된다.

3. 'firstFunction()'내부에 'secondFunction()'이 존재하므로 'secondFunction()'이 스택에 추가된다.

4. 'secondFunction()' 내에는 'thirdFunction()' 함수가 존재하므로 'thirdFunction()'이 스택에 추가된다.

5. 'thirdFunction()' 함수에는 더 이상 호출하는 값이 없으며, "호출 스택(Call Back)"이라는 콘솔 문구가 수행되며 종료된다. 이때 'thirdFunction()' 함수는 스택에서 제거된다.

6. 이어서 'secondFunction()'이 5번과 같은 동작으로 호출 후 종료한다.

7. 이어서 'firstFunction()'이 6번과 같이 5번 동작을 반복하며 종료된다.

정리하면 'thirdFunction()' 함수에 있는 "호출 스택(Call Back)" 함수가 1번으로 출력되고, 'secondFunction()' 함수에 있는 "호출 스택(Call Back)" 함수가 2번으로 출력되고, 'firstFunction()' 함수에 있는 "호출 스택(Call Back)" 함수가 3번째인 마지막에 출력되면서 종료된다.

이것이 호출 스택이다.

 

이후 다른 함수가 호출되면 그 함수를 위와 같이 호출하게 된다.

 

 

 

호출 스택(Call Stack) 주의점

호출 스택(Call Stack)의 경우 함수 호출을 추적하는 구조를 가지기 때문에 호출하면 호출된 함수는 스택에 프레임으로 하나씩 쌓이면서 저장된다. 그리고 프레임에는 함수에 대한 정보와 현재 실행 상태가 포함된다. 하지만 호출 스택이 메모리에서 한정된 공간을 배정받는데 받은 공간보다 많은 함수를 호출하여 스택에 쌓고, 초과하게 되는 경우. 스택 오버플로우(Stack Overflow) 오류를 범하게 된다.

 

[문제 코드]

function recursive() {
  recursive();
}

recursive();

위에 스택 오버플로우를 범하는 문제의 코드이다. 재귀 함수를 구현할 때 재귀는 종료시키는 것을 따로 두지 않으면 본인이 본인을 계속 호출해서 중첩하게 되는데 이런 코드의 경우 끝나지 않도록 무한하게 쌓아내기 때문에 주의하며 호출 스택을 구현하는 것을 권한다.

 

 

---

궁금한 부분이 있거나, 오타가 있다면 언제든지 댓글로 얘기 주시면 감사드리겠습니다.

다음 포스팅 때 뵙겠습니다!

 

 

 

- 참조 -

https://developer.mozilla.org/ko/docs/Glossary/Call_stack

호출 스택 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN