Call Stack

해당 시리즈는 Leonardomso의 33 Concepts Every JavaScript Developer Should Know 를 보고 공부, 정리한 시리즈이며, 자세한 내용은 링크를 확인하길 바란다.

Call Stack이란

MDN 상의 정의는 다음과 같다.

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

Call Stack은 함수의 호출을 제어하고 함수를 일시적으로 보관 및 추적하는 역할을 수행하는 스택 형태의 자료 구조이다.

기본적으로 stack 형태의 자료 구조이기에, LIFO Last In First Out 원리에 따라 함수를 보관하며, 동기적인 특징을 갖는다.( stack의 맨 위에 있는 함수가 완료되어야, 그 아래에 있는 함수를 실행할 수 있다. )

함수의 호출을 통제하기에, 현재 어떤 함수가 작동하고 있고, 어떤 함수 내에서 작동하며, 이 이후에 어떤 함수가 호출되어야 하는지 파악하고 있다.

참고로 자바스크립트는 싱글 스레드 언어(Single-Threaded Language)이기에 하나의 Call Stack 을 갖는다.

Call Stack을 활용하여 함수가 호출되는 과정은 다음과 같다.

과정

1. 스크립트에서 함수를 호출한다.
   1. interpreter가 이를 Call Stack에 추가한다.
   2. 추가한 이후, 추가한 함수를 수행한다.
2. 함수를 통해서 호출되는 모든 함수가 호출될 때까지 1번 과정을 반복하며, Call Stack에 추가한다.
3. 모두 호출되었다면, stack의 가장 top에 있는 함수부터 실행한다.
4. 실행이 완료되면, interpreter는 해당 stack을 제거하고 그 다음 함수의 이후 코드를 실행한다.
5. Call Stack에 있는 모든 함수가 다 제거될때까지 3, 4번을 반복한다.

코드 예시

function evening() {
    console.log("Good evening")
}

function afternoon() {
    evening()
    console.log("Good afternoon")
}

function morning() {
    afternoon()
    console.log("Good morning")
}

morning()

위 코드의 진행 과정을 Call Stack에 따라 보면 다음과 같다.
흐름을 한 번에 보고 싶다면, 이 링크를 확인해보자.

진행 과정

먼저, morning 함수를 호출했기에 Call Stack에 해당 함수를 추가한다.

이후, morning 함수를 실행하면, 내부에 있는 afternoon 함수가 호출되기에 Call Stack에 추가한다.

afternoon 함수를 이어서 실행하면, 내부에 evening 함수가 호출되기에 Call Stack에 또 다시 추가한다.

모든 함수가 호출되었기에, stack의 top에 있는 evening 함수부터 이어 실행한다.

evening 함수가 실행되면서 내부에 있는 "Good evening"를 출력하고, 이후 실행이 완료되었기에, Call stack에서 없어진다.

afternoon 함수와 morning 함수도 마찬가지로 실행되고 Call stack에서 없어지며, 모든 과정이 마무리된다.

에러 출력

function evening() {
    throw new Error("Bad Day!")
    console.log("Good evening")
}

function afternoon() {
    evening()
    console.log("Good afternoon")
}

function morning() {
    afternoon()
    console.log("Good morning")
}

morning()

위 코드처럼 도중에 에러를 발생시키면 모든 과정이 멈추고, 현재 Call Stack에 쌓인 함수들을 보여준다

Stack overflow

Stack overflow는 말 그대로, stack이 할당된 공간보다 많은 공간을 차지하면 발생하며, 대개 아래 코드 처럼 출구가 없는 재귀함수 같은 경우 많이 발생한다.

function callMe() {
    callMe()
}

callMe()

위처럼 최대 Call Stack 사이즈를 초과했다는 에러를 보여준다!

정리

Call Stack은 함수의 호출을 제어하고 보관 및 추적하는 스택 형태의 자료 구조이다.
스택 이기에 LIFO를 따르며, 자바스크립트은 싱글 스레드 언어이기에 하나의 Call Stack만을 갖는다.

+ 추가적으로

Call stack은 추후에 다룰 Event Loop이나, 비동기 처리를 할 때 기본적으로 이해를 해둬야하는 개념이기 그 원리를 항상 잘 알아두자!

참고 자료

MDN 공식 문서
노마드코더 유튜브 영상
https://medium.com/@gaurav.pandvia/understanding-javascript-function-executions-tasks-event-loop-call-stack-more-part-1-5683dea1f5ec
https://www.freecodecamp.org/news/understanding-the-javascript-call-stack-861e41ae61d4/