자바스크립트의 동작 원리.

자바스크립트는 스크립트 언어입니다.

말 그대로 클래스 언어가 아니라 스크립트 언어죠.

우리가 작성한 스크립트 구문을 해석하고 실행하는 엔진은 어떻게 동작하는 건지 알아보겠습니다.

왜 알아봐야 하냐면, 자바스크립트가 어떻게 동작하는지를 알아야 코딩하고 이해할 수 있는 코드가 있습니다.

setTimeout(function(){},1)

여러 이벤트 리스너들의 순차적 동작들

자바스크립트 엔진은 크게 3가지 영역으로 나누어 집니다.

1. 콜 스택

2. 힙

3. 이벤트 큐

4. 이벤트 루프

3가지라고 해놓고서는 이벤트 루프를 끼워 팔았습니다.

 

1. 콜 스택.

프런트 개발을 해보았다면 익숙한 이름입니다.

(크롬 개발자 도구를 보다 보면 콜 스택이 착착 쌓이는 것을 확인할 수 있습니다. 가끔은 에러 코드에서 만날 때도 있고요 ; ) )

자바스크립트는 싱글 스레드로 동작하며 하나의 콜 스택만을 사용합니다.

이것이 무슨 의미냐면 함수 하나를 실행하면 콜 스택에 그 녀석을 쌓고 해당 함수에서 내부 함수를 또 실행하면 그 녀석을 스택에 쌓고 이런 식으로 스택에 쌓아 나가면서 함수를 실행합니다. 이렇게 진행해 나가다가 가장 내부 함수의 실행이 끝나면 스택에서 해당 친구는 사라지고(POP) 그리고 스택의 다음 함수를 마저 실행하고 이런 식으로 동작해 나간다는 의미입니다.

(싱글 스레드라 갑갑합니다 장점도 있죠. 데드락 같은 골치 아픈 일이 없을 테니깐요.)

결국 이 스택에 쌓인 한 친구가 시간을 무지하게 잡아먹으면 모든 게 멈춰버립니다. 이것이 그 유명한 블록킹입니다.

 

2. 힙.

프로그램을 실행하면서 생성된 데이터는 힙 메모리에 할당됩니다.

 

3. 이벤트 큐 (a.k.a 콜백 큐, 메시지 큐)

1번에서 열심히 쌓은 콜 스택이 전부 실행되어 비게 되면, 이벤트 큐에 있는 이벤트들을 처리합니다.

그럼 여기 이벤트 큐에는 뭐가 쌓여 있는 걸까요?

바로 비동기로 처리되는 함수들이 이곳으로 오게 됩니다.

예를 들어 setTimeout 함수를 실행하면 해당 친구는 콜 스택으로 갔다가 바로 팝 되고 콜백 함수는 이벤트 큐에 들어와 실행 순서를 기다리게 됩니다.

그리고 나머지 콜 스택을 다 실행하고 난 후, 이벤트 큐에 있는 콜백을 실행하는 거죠. 물론 setTimeout의 콜백은 콜 스택에 쌓여서 실행되겠죠.

이러한 이유로 setTimeout의 시간이 보장되지 않는 겁니다. 콜 스택이 언제 비어질지 모르니깐요.

 

+ 꼽사리 이벤트 루프

콜스택이 비어있는지를 계속 체크하면서 비어있다면 이벤트 큐에서 하나 꺼내서 콜 스택에 넣는 역할을 합니다.

바로 체크 -> 옮기기 동작을 이벤트 루프가 하는 거죠.

이벤트 루프가 얼마나 열심히 일하는지 박수라도 쳐줘야 하는 거 아닌가 모르겠습니다. ; )