[javascript] 자바스크립트 내부 동작

자바스크립트는 동기적 언어이며, 인터프리터 형식의 언어이므로 코드를 위에서 한줄씩 순차적으로 처리한다. 그리고 이러한 코드를 처리하기 위해 쌓이는 장소가 있는데, 이를 호출스텍 혹은 콜스텍(Call Stack)이라 한다. 하지만, 무조건 순차적으로 처리하는 것은 아닌데, 비동기적 코드(setTImeout, animationframe, promise.then) 를 만나게 되면, 이 코드들은 1차적으로 Call Stack으로 이동시킨 후 곧바로 열외시켜  Web Apis 라고 불리는 공간으로 보내버린다.

 

여기서 Web Apis 는 비동기적 코드를 처리하는 영역으로, 이 공간에서 비동기적 코드들은 실행될 준비가 완료되고,   Callback Queue 로 전달되어 대기상태가 된다. 이 때 무한정 대기상태가 되는 것은 아니며, Call Stack 에서 처리하고 있던 동기적 코드들이 자기 할 일은 하고 떠나고, Call Stack 이 완전히 비게 되면, 이벤트 루프(Event Loop) 라는 감독관이 Callback Queue 에서 놀고 있는 비동기적 코드들을 들어온 순서에 따라 Call Stack 으로 보내 버린다. 

 

이것이 일반적인 자바스크립트의 코드들이 처리되는 순서이다.

 

하지만, 비동기적 코드들이 Web Apis 에 전달되고, 그 후 Callback Queue 에 전달이 될 때, 모든 비동기적 코드가 같은 공간에 저장되는 것은 아니다. 명확히 말하면, Callback Queue 라는 거대한 공간에 모이는 것은 맞지만, 그 안에서 여러 개의 서열이 존재하고, 각 서열에 속하게 된다.

 

예를 들어 아래의 표 전체가 Callback Queue 라고 한다면, 그 내부에 promise.then 이 저장되는 큐가 있고, setTimeout 이 저장되는 큐가 있고, requestAnimationFrame  이 저장되는 큐가 각각 존재한다.  이를 각 각 Task Queue(Event Queue), Microtask Queue(Job Queue), Animation frames 라 한다.

Callback Queue ㄱ

Task Queue(Event Queue) : 서열 3위 (setTimeout, setInterval)

Microtask Queue(Job Queue) : 서열 1위 (promise의 then

Animation frames : 서열 2위  (requsetAnimationframe)

그리고 이들 간에도 서열이 존재하는데,  Microtask Queue(Job Queue) 가 왕들의 모임이고, Animation frames 가 2인자들의 모임이라면,   Task Queue(Event Queue) 는 꼬봉들의 집합이다. 

 

따라서 Callback Queue 에 Task Queue 에 해당하는 비동기적 코드가 먼저 도착해서 나갈 준비를 한다고 해도, Microtask Queue 에 속한 코드들이 있다면  이들이 우선 Call Stack 으로 이동하게 된다. 그 후 Task Queue 가 나갈 준비를 하는데, 그 사이에 또 다른Animation frames 에 속하는 코드가 존재한다면, 이들 코드가 먼저 Call stack 에 전달된 후 Task Queue 에 속하는 코드들이 마지막으로 처리된다.

 

 

정리하면,

자바스크립트에서 코드는 1차적으로 동기식으로 처리되지만, 비동기적 코드가 존재하면, 이들 비동기적 코드는 Web Apis 에 전달되어 코드를 실행할 준비를 하고, 실행할 준비가 되면 Callback Queue로 이동하여, Call Stack에 자리가 완전히 빌 때 까지 잠정적인 대기상태가 되며, Call stack에 자리가 빈다면, Microtask Queue, Animation frames, Task Queue 순서대로 Call Stack 에 Event loop 에 의해 전달되어 코드를 실행한다.