Javascript Call Stack - 자바스크립트 기초 공부 #1

자바스크립트 기초 내공을 쌓기 위해 자바스크립트 개발자라면 알아야 하는 기본 개념들을 정리하고 있습니다. 이번 글에서는 그 첫 번째로 Javascript Call Stack에 대해서 살펴보도록 하죠.

용어정리

먼저 용어부터 정리하도록 하죠. 자바스크립트 콜스택은 영어로 Javascript Call Stack으로 쓰이고 우리말로 번역하여 자바스크립트 호출 스택이라고도 합니다. 이 글에서는 한글로 "자바스크립트 콜스택"이라고 표기하겠습니다.

자바스크립트 콜스택 이란?

자바스크립트는 콜스택은 자바스크립트 함수를 호출하는 매커니즘을 말합니다. 스택이란 하나씩 쌓았다가 가장 위에 있는 것부터 차례대로 쓰는 방식(LIFO, Last In First Out)이죠.

따라서 자바스크립트 콜스택은 호출할 함수를 스택으로 쌓아놓고 맨 위에서 부터 하나씩 처리해가는 방식을 의미합니다. 이를 통해 자바스크립트는 함수를 어떤 순서로 실행할지를 결정하게 됩니다.

자바스크립트 콜스택 예제

간단하게 자바스크립트 콜스택이 어떻게 동작하는지 살펴보도록 하죠. 아래와 같이 one, two, three 함수를 만들고 one->two->three를 호출하도록 합니다.

three의 console.log에 break point를 걸어놓고 js파일을 실행합니다. 그리고 크롬 개발자 도구를 통해 Call Stack 항목을 보면 아래 그림과 같이 보여집니다.

Call Stack에 찍힌 것을 보면 먼저 익명으로 one()이 호출된 후 one, two, three 함수가 스택에 쌓인 것을 볼 수 있습니다. 이 상태에서 계속 실행을 하면 three 함수에 있는 console.log가 실행되면서 "this is three"가 찍히게 되고 이 후 three, two, one 함수가 순서대로 Call Stack사라지게 됩니다. 

(영상을 보려면 클릭하세요)

이처럼 자바스크립트는 실행할 함수를 스택으로 쌓아놓고 맨 위에 쌓인 함수부터 차례대로 실행하는 것이죠. 자바스크립트의 이런 함수 호출 방식을 자바스크립트 콜스택이라고 하는 것입니다.

자바스크립트 콜스택 size limit

자바스크립트 콜스택은 무한대로 함수를 쌓을 수 없습니다. 만약 콜스택 Limit를 벗어나게 되면 자바스크립트는 "Maximum call stack size exceeded" 에러 메시지를 내게 됩니다. 이른 바 "stack overflow" 에러죠. 

자바스크립트 콜스택 size limit 예시

아래와 같이 함수 one, two가 서로를 재귀호출하게 되면 자바스크립트 콜스택에 실행할 함수가 무한대로 쌓이게 됩니다.

자바스크립트 콜스택 size는 브라우저별로 다르게 설정되어 있습니다. 만약 이 size를 넘어가게 되면 아래와 같이 Maximum call stack size eceeded 에러 메시지를 내게 됩니다. 브라우저별 자바스크립트 콜스택 size는 링크를 참고하세요.

이상 자바스크립트 콜스택에 대해 간단하게 알아봤습니다. 자바스크립트 콜스택을 이해하고 있으면 실행 과정에서 발생하는 에러 로그와 자바스크립트 동시성 문제 등을 이해할 수 있습니다. 다음 시간에는 자바스크립트 Primitive Type에 대해 알아보도록 하겠습니다.

** 336x280 **