JS 동작원리 4편 - 콜 스택

메모리 힙에 이어서 이번엔 콜 스택에 대해 알아보도록 한다.

콜 스택은 이름에서 알 수 있듯이 스택 구조의 저장공간에서 코드를 호출한다.

 

Call Stack

위와 같은 코드의 JS문서가 실행된다고 가정했을 때 콜 스택을 확인해보자

크롬 개발자 콘솔창에서 해당 코드를 실행시켜서 디버깅을 하면 스코프 상태 밑에 콜 스택을 볼 수 있다.

처음 스택에 들어가는 것은 anonymous, 전체 파일이며 main함수라고 보면 된다.

파일이 실행되고 calc함수를 호출하는 코드를 만난다.

콜 스택을 확인해보자 anonymous위에 calc가 쌓인 것을 볼 수 있다.

이후 실행상태는 calc함수 내의 코드로 이동했다.

sum을 계산하고 리턴문으로 넘어갔더니 이번엔 sub함수 호출을 만나게 된다.

다음 행동이 이제는 예상이 갈 것이다.

역시나 sub가 호출되었으므로 콜 스택에 calc위로 sub이 쌓이게 되며

실행상태는 sub함수로 이동하여 계산을 한다.

계산이 끝난 sub함수는 리턴을 하고 종료가 된다.

콜 스택에서도 sub이 사라졌음을 확인할 수 있다.

마찬가지로 calc함수도 리턴을 하고 콜 스택에서 pop 될 것이고

마지막으로 anonymous가 콜 스택에서 사라짐으로써 프로그램은 종료될 것이다.

코드 실행을 한 줄씩 하면서 실행된 함수를 스택에 push하고 종료된 함수는 다시 pop을 한다.

 

Call stack overflow

스택 오버플로우는 보안 쪽에서 유명한 이슈이자 개발자 질답 사이트이기도 하다.

JS엔진의 콜 스택도 당연히 스택 자료구조를 사용하기 때문에 

메모리 힙과 마찬가지로 저장용량에 한계가 있다.

무한 재귀함수를 개발자 콘솔에서 실행시켜볼 생각 하니 가슴이 두근거린다.

메모리 힙의 메모리 누수와는 다르게 페이지가 멈추진 않았지만

콜 스택 사이즈를 넘어섯다는 오류를 확인할 수 있다.

중요하진 않지만 콜 스택의 사이즈는 브라우저마다 다르지만 대략 13000~15000의 크기를

가진다고 알고있다.

무한 루프 이외에는 웬만하면 스택 사이즈를 넘기긴 힘들지만

스택의 깊이가 과도하게 깊어지지 않게끔 함수를 작성하는 것이

조금은 스택의 공간 절약에 도움이 될 것이다.