개관

자바스크립트 함수가 실행될때 브라우저는 어떤 일이 일어날까요? 당신이 웹개발을 하고 있는 개발자이건, 학교를 다니는 학부생이건 간에 자바스크립트의 함수 호출식은 어렵지 않게 작성할 수 있을것입니다. 다음과 같이 말이죠.

function jsFn(){
  console.log('hello');
}
jsFn(); //hello

저는 오늘 이것에 더하여 자바스크립트 함수를 호출할 때 이루어지는 것들에 대해서 이야기를 해보려 합니다. 함수를 실행했을 때 이루어지는 동작원리를 이해하고 있다면 우리는 더욱 나은 코드를 작성할 수 있을것이기 때문이죠.

엔진

우선 엔진에 대하여 이야기 해보도록 하겠습니다. 자바스크립트를 구동시키는데에 있어 수 많은 브라우저(사파리, 익스플로러, 크롬, 오페라 등..)들은 각자 자신이 가지고 있는 엔진이 있습니다. 이 엔진은 코더가 작성한 자바스크립트를 이해하고 그것을 구동시키는 역할을 주로 합니다. 각 브라우저별 엔진이 완전히 똑같은 일을 수행하고 있는 엔진들이라고 할 수는 없겠지만 중요한 것은 자바스크립트를 이해하고 그에 따른 기능을 구동시킨다는 것이 각 브라우저 내장 자바스크립트 엔진들에 대한 공통점이라는 것입니다. 그렇다면 이 엔진은 우리가 자바스크립트 함수를 호출할 때 구체적으로 어떤 행위들을 하게 되는 것일까요? 이 답을 하기 위해서 엔진 내의 콜스택이라는 개념을 설명드려야 할것 같습니다.

메모리히프(Memory Heap)

할당해야 할 메모리의 크기를 프로그램이 실행되는 동안 결정해야 하는 경우(런 타임때) 유용하게 사용되는 공간

콜 스택(Call Stack) :

컴퓨터 프로그램에서 현재 실행 중인 서브루틴에 관한 정보를 저장하는 스택 자료구조

우리는 자바스크립트로 코딩할때면 우선 선언을 하게 될 것입니다. 배열이든 함수든 숫자든 문자열이든 간에 말이죠. 우리가 코딩하고자 하는것을 확인해 보면 변수의 선언부도 있을 것이고 함수의 실행부도 있을 것입니다. 이러한 코드들을 브라우저 내의 자바스크립트 엔진은 읽어 들입니다. 그 후 트랜스파일링과 컴파일링을 거쳐 개발자가 작성해놓은 코드들을 명령어로 실행준비를 마칠 것입니다. 바로 여기 자바스크립트 엔진이 실행하기 전까지의 변수들은 메모리의 정돈된 영역에 할당이 될 것이고 자바스크립트가 실행 되면서, 즉 런타임 때는 메모리의 비정돈 영역, 즉 힢 영역에 할당이 될것입니다. 그런과정을 수행함과 동시에 자바스크립트는 함수의 호출을 기억합니다. 함수를 하나 실행한다면 엔진 내의 콜스택 영역에는 스택이 하나 쌓이고 함수의 실행이 끝남과 동시에 콜스택 영역의 스택은 사라질 것입니다.

만약, 함수 내에 함수가 중첩으로 존재한다면? 하나의 함수 내에 하나의 함수가 중첩되어 있고 그 함수 내에 또 하나의 함수가 중첩되어있다면 콜스택에는 실행되고있는 함수의 수만큼 스택을 쌓아 나갑니다. 그리고 스택의 후입선출 원리에 맞추어 가장 늦게 실행된 함수를 가리키는 스택이 가장 먼저 빠져나가면서 역순으로 콜스택 내의 스택들은 줄어들 것입니다. 조금 오버해서 무한 재귀호출 함수를 실행한다면 당신은 브라우저가 스택 오버플로우 오류를 발생시키는 상황을 확인할 수 있을 것입니다.

자바스크립트 엔진의 콜스택이라 함은 단순히 말해서 함수의 실행을 기억하는 영역이라고 할 수 있습니다. 자바스크립트는 멀티쓰레드 환경이 아닌 단일쓰레드의 언어이기 때문에 스택의 순서는 명백합니다. 이 때 만약 중간의 함수가 어떠한 실수로 인해 일처리가 지연이 된다면? 그렇다면 당연히 후에 있는 실행 대기중인 함수들도 지연이 되게 됩니다. 이때 발생하는 문제는 심각할수 있습니다. 중간에 하나의 함수가 잘못된다면 그 뒤의 모든 함수가 영향을 받기 때문이죠. 이러한 상황을 미연에 방지할수 있는 가장 쉬운 해결책으로는 비동기 콜백(Asynchronous callbacks)이 있습니다. 비동기 콜백은 즉시 실행되는 함수가 아니기 때문에 콜스택 내에 즉시 스택으로서 적재되지 않습니다. 비동기 콜백을 실행할 주체는 따로 있습니다. 그 주인공이 바로 Callback Queue 라고 하는 녀석입니다. 비동기 콜백을 수행하게 되었을때 콜백Queue 영역에는 하나씩 처리할 Job들을 쌓아 나갑니다. Queue는 선입 선출이 전제로 깔려있습니다. 선입되어진 콜백 함수는 자바스크립트 엔진 내의 이벤트루프(Event Loop)라는 녀석에 의해 감시당하게 되고 이벤트루프는 스택이 비어있을 때 콜백함수를 스택에 넣어줍니다. 그러면 함수는 실행이 됩니다.

여기까지 자바스크립트 콜스택에 관한한 가벼운(?) 이해를 해보았습니다. 콜스택 영역은 브라우저 개발자 도구에서도 직접적으로 확인이 가능하니 가능한한 많은 레퍼런스를 참고하시고 테스트를 거쳐보시기 바랍니다.

이상입니다.

부족한글 읽어주셔서 감사합니다. ^^