[개념정리] 콜스택과 이벤트루프

자바스크립트가 함수를 호출하면 인터프리터가 이를 호출 Stack에 추가하고 함수를 수행한다

메인함수가 끝나면 인터프리터가 Stack에서 함수를 제거한다.

(할당 공간보다 많은 공간을 차지하게 되면 stack overflow에서가 나게 된다.)

 

이렇게 코드를 작성하고 함수를 실행하면 스택에 무언가를 올리는 행위를 push,

함수로부터 무언가를 리턴받는 행위를 pop이라고 한다.

 

함수와 달리 객체들은 Heap에 할당된다.

 

자바스크립트 엔진은 이렇게 '메모리 Heap'과 'Call Stack'이라는 두가지 뼈대를 가지고 있다.

객체들은 Heap에 함수는 Stack에 할당이 되는 것이다.

하지만 Stack의 함수들이 바로 실행되는것이 아니다.

자바스크립트는 브라우저 위에서 돌아가는 경우가 많은데,

따라서 Stack에 정의된 함수가 실행되기 위해 브라우저의 해당 함수 API를 불러야 되는 경우가 많다.

자바스크립트는 API만 부르고, 실제 작동하는 함수는 C++로 개발된 브라우저 API가 된다.

 

즉, Stack의 특정함수는 브라우저의 API를 부르는 과정을 거치고 실행이된다.

이때 브라우저에서 호출한 API들은 Queue에 쌓인다.

Queue는 여러가지 종류가 있으나, 브라우저 API는 Task Queue에 쌓인다.

promise같은 함수는 Microtask Queue에, 화면관련 함수는 Animation Frame Queue에 쌓인다

 

이 시점까지도 아직 함수는 실행되지 않았다.

어떤 함수를 언제 실행하느냐는 이벤트 루프가 정한다

이벤트 루프는 Queue에 있는 함수들을 보고 같은 Queue의 함수들은 순서대로 꺼낸다.

Stack이 비어있는지 확인하고, 비어있다면 꺼낸 함수를 Stack에 넣는다.

그렇게 함수가 실행되는 것이다.

이를 Reactor 패턴이라고도 한다.

 

 

 

발퀄이지만...

 

1) 작성한 코드의 함수가 순서대로 콜스택에 쌓인다 + 정의한 객체도 힙에 쌓인다

2) 함수2는 web API를 이용하는 함수이다. 함수2는 web API를 콜하고 콜스택에서 사라진다.

3) 함수2 API는 큐에 쌓인다

4) 콜스택은 남은 함수1을 실행한다.(함수1은 web API를 사용하지 않는다)

5) 함수2, 함수1이 모두 사라져 콜스택이 비었다. 이벤트 루프는 이를 감지해 함수2API를 콜스택으로 옮긴다.

6) 함수2API가 실행된다.