[Javascript] 비동기 함수가 처리 되는 과정

JavaScript의 런타임 모델은 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 이벤트 루프에 기반하고 있으며, C 또는 Java 등 다른 언어가 가진 모델과는 상당히 다릅니다.
출처: MDN Event Loop

Heap

객체는 (대부분 구조화되지 않은 영역인) 힙 영역에 할당됩니다.

Call Stack

Javascript에서 함수가 호출되면 Frame 스택이 형성되어 스택에 쌓이게 됩니다. 일반적을 콜 스택에서 후입선출(Last in First Out)되어 처리됩니다. 일반 함수가 처리되고 반환되면 해당 Frame 스택(가장 상위의 스택)을 꺼내게 되고 스택이 텅 빌 때까지 순서대로 처리됩니다. Javascript가 기본적으로 동기적이고 블로킹 방식의 싱글 스레드로 동작할 수 있는 방식입니다.

Task Queue

만약 호출된 함수가 비동기 함수라면 Message가 큐에 추가되어 선입선출(First in First Out)로 처리됩니다. 하지만 큐에 추가된 메시지들은 바로 처리되지 않고 스택이 비어 있을 때 처리되기 시작합니다.
큐에 있는 메시지가 처리될 때 이 메시지를 매개변수로 메시지와 관련있는 함수(콜백 함수)를 호출합니다. 그리고 이 함수 호출은 당연히 새로운 Frame 스택에 추가됩니다.

Event Loop

비동기 처리의 핵심인 이벤트 루프는 Javascript 런타임이 어떤 순서로 처리를 할 지 결정합니다. HTML 표준 이벤트 루프와 Node.js의 이벤트 루프는 차이가 있지만 공통적으로 각 메시지의 처리는 다른 메시지를 처리하기 전에 완전히 끝나고, 논 블로킹의 특징을 가집니다.

HTML 표준의 이벤트 루프

events, user interaction, scripts, rendering, networking, and so forth, user agents를 조정(coordinate)하기 위해 각각의 이벤트 루프를 가집니다.

Node.js의 이벤트 루프 (libuv)

Node.js 애플리케이션이 실행되는 동안 메인 스레드가 차단되지 않도록 비동기 프로그래밍을 도와주는 이벤트 루프는 6개의 서로 다른 대기열이 있고 각 대기열에는 하나 이상의 콜백 함수가 있습니다.

출처: Visual Guide to Node.js Event Loop - written by VISHWAS GOPINATH

1. 타이머 대기열 timer queue
2. I/O 대기열 I/O queue
3. 검사 대기열 check queue : Node에 고유한 함수(setImmediate함수 등)와 관련된 콜백을 보관
4. 닫기 대기열 close queue : 비동기 작업의 닫기 이벤트와 관련된 콜백을 보관
5. microtask queue :
   • nextTick queue
   • promise queue

이벤트 루프 내 실행 순서는 5(항상 nextTick queue -> promise queue 순서)
-> 1 (만약 5에 콜백이 있다면 1의 각 콜백이 끝날때마다 실행)
-> 2 (만약 5에 콜백이 있다면 2의 각 콜백이 끝날때마다 실행)
-> 3 (만약 5에 콜백이 있다면 3의 각 콜백이 끝날때마다 실행)
-> 4 -> 5 -> 콜백이 남아있다면 반복입니다.

참고
map, reduce함수안에서 async, await 쓰기