[JS] Call stack

들어가며

이번 시간에는 자바스크립트에서 중요한 개념 중 하나인 콜 스택(Call stack)에 대해 알아보도록 하겠습니다.

콜 스택이란

콜 스택은 자바스크립트에서 함수 호출을 관리하는 데이터 구조입니다.

구조

• 스택(Stack)
  콜 스택은 스택이므로 LIFO(Last In First Out, 후입선출) 구조를 가집니다.
• 프레임(Frame)
  콜 스택을 이루는 각 블록을 말합니다.
  함수가 호출되면, 해당 함수의 실행 컨텍스트가 프레임에 담겨 콜 스택에 추가됩니다.
  실행 컨텍스트는 자바스크립트에서 코드가 실행될 때 생성되는 환경을 의미합니다.

어떻게 작동할까

콜 스택은 다음과 같이 작동합니다.

1. 함수가 호출되면, 해당 함수의 실행 컨텍스트가 프레임에 담겨 콜 스택에 추가됩니다.
2. 함수가 실행을 완료하면, 스택에서 해당 프레임이 제거됩니다.

예시와 함께 보겠습니다.

function a() {
    b();
    console.log('A');
}

function b() {
    console.log('B');
}

a();

위 코드를 실행하면, 콜 스택은 다음과 같이 변화합니다.

1. 콜 스택은 비어있는 상태입니다.

2. a()가 호출됩니다. 콜 스택에 a()가 추가됩니다.

    - a // top

3. b()가 호출됩니다. 콜 스택에 b()가 추가됩니다.

    - b // top
    - a

4. 'B'가 출력됩니다. 콜 스택에서 b()가 제거됩니다.

    - a // top

5. 'A'가 출력됩니다. 콜 스택에서 a()가 제거됩니다. 콜 스택은 비어있는 상태입니다.

에러 발생 시

코드 실행 도중 에러가 발생하면, 자바스크립트는 해당 에러를 처리하기 위해 콜 스택을 거슬러 올라가며 에러가 발생한 위치를 추적합니다.

스택 오버플로우

다음과 같은 코드가 있다고 해볼게요. 이 때 콜스택은 어떻게 변할까요?

function recursive() {
  recursive();
}

recursive();

recursive()가 호출되고, 콜 스택에 recursive()가 추가됩니다.
종료 조건이 없기 때문에 재귀호출이 반복되어 결국 콜 스택이 가득 차게 됩니다.

    .
    .
    .
- recursive()
- recursive()
- recursive()

이렇게 콜 스택이 가득찬 상태에서 다시 무언가를 추가하려 한다면, '스택 오버플로우(Stack overflow)' 가 발생하게 됩니다.

이 에러는 주로 다음과 같은 상황에 발생합니다.

• 재귀가 너무 깊어질 경우
• 함수에 너무 많은 인자들을 전달할 경우

해결 방법

이 문제는 아래와 같이 해결할 수 있습니다.

• 종료 조건 추가
  재귀 함수에 종료 조건을 추가해 무한 호출을 방지합니다.
• 반복문 사용
  재귀 대신 반복문을 사용합니다.
• 함수 인자 줄이기
  함수에 너무 많은 인자를 전달하지 않도록 합니다.

마치며

이번 시간에는 자바스크립트에서 중요한 개념인 콜 스택에 대해서 알아봤는데요. 이를 통해 함수가 어떻게 호출되고 실행되는지를 파악할 수 있었습니다.

피드백이나 의견은 언제나 환영합니다 :D

감사합니다.

References

https://developer.mozilla.org/en-US/docs/Glossary/Call_stack

https://en.wikipedia.org/wiki/Call_stack