비동기 함수의 처리 과정을 이해하는 것이 중요하다. js도 코드를 읽을 때 위에서부터 아래로 코드를 읽지만, 비동기 함수의 실행 시간의 차이로 실제 화면에 표시되는 결과는 코드 작성 순서와 다를 수 있다.
자바스크립트 엔진은 메모리 힙(Memory Heap)과 콜 스택(Call Stack)으로 구성되었다.
구글의 V8엔진(C++로 작성)이나 모질라의 Rhino엔진(Java로 개발)등이 js엔진을 구현하는 유명한 프로젝트이다.
메모리 힙(Memory Heap)은 메모리 할당이 이루어지는 곳으로 프로그램에 선언한 변수나 함수 등이 들어있다. (정보를 저장하는 공간)
콜 스택(Call Stack)은 실제로 실행하는 코드를 순서대로 실행하는 곳이다. (실행 중인 코드를 트랙킹하는 공간)
js는 단일 쓰레드(single thread)언어라고 하는데, 쌓이는 콜 스택이 하나라는 뜻이다. 하나의 스택이 쌓이면 동기, 비동기 함수에 따라 바로 실행이 되거나 이벤트 루프로 넘아간다.
Web APIs는 브라우저에서 제공하는 API이다. DOM, Ajax, Timeout등이 외부 API이다.
콜 스택에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백함수를 콜백 큐(Callback Queue)에 추가한다. Web API에서 콜 스택으로 넘어가는 순서는 비동기 함수의 실행이 완료되는 함수부터 먼저 콜백으로 넘어가고, 콜백 큐에서는 선입선출(fifo)에 따라 콜 스택으로 넘어가 실행된다.
이렇게 콜 스택이 비어있을 때 콜백 큐의 첫 번째 콜백을 넘겨주도록 콜 스택을 체크해주는 것을 이벤트루프(event loop)라고 한다.
다음은 이벤트 루프에 따른 비동기 함수의 실행 과정이다.
