[JS] 이벤트 루프(Event Loop)

이미지 좌측에 JavaSciprt Engine에 관한 Memory Heap, Call Stack에 관한 내용은 해당 게시글을 참조하면 된다.

WEB APIs

이미지 우측에 Web APIs는 JS로 묶은 것 밖에 있다.

JS 엔진에 대한 것이 아니라는 것을 의미한다.,
Web API는브라우저에서 제공하는 API로, DOM, Ajax, Timeout 등이 있다.
Call Stack에서 실행된 비동기 함수는 Web API를 호출하고,
Web API는 콜백 함수를 Callback Queue에 밀어 넣는다.

Callback Queue

비동기적으로 실행된 콜백 함수가 보관되는 영역이다.

JavaScript로 작성된 함수들의 호출이나 선언이 Memory Heap에 저장된다는 것이 차이점이다.
예를 들어 setTimeout에서 타이머 완료 후 실행되는 함수(1st 인자),
addEventListener에서 click 이벤트가 발생했을 때 실행되는 함수(2nd 인자) 등이 보관된다.

• Queue(큐) : 자료 구조 중 하나, 선입선출(FIFO, Frist In Frist OUT)의 룰을 따른다.

Event Loop

Event Loop는 Call Stack과 Callback Queue의 상태를 체크하여,
Call Stack이 빈 상태가 되면, Callback Queue의 첫 번째 콜백을 Call Stack으로 밀어 넣는다.
이러한 반복적인 행동을 틱(tick)이라 부른다.

정리해보자면 Call Stack에서 동기적으로 처리된 컨텍스트들을 선입 후출로 먼저 처리하고
Web APIs에 의해서 Callback Queue에 보관된 비동기적으로 처리해야 하는 것은 Event Loop를 통해서 Call Stack이 비어있다면 Callback Queue에서 처음 들어온 것부터 처리하도록 밀어준다.

자바스크립트를 단일 스레드 프로그래밍 언어라 한번에 하나씩 밖에 실행할 수 없다.
그러나 Web API, Callback Queue, Event Loop 덕분에 멀티 스레드 처럼 보여진다.