자바스크립트의 이벤트 루프는 자바스크립트에서 비동기 처리
를 가능하게 하는 핵심 개념 중 하나이다.
단일 스레드
기반의 언어로 한 순간 하나의 작업만을 할 수 있다.비동기로 동작
하기 때문에 단일 스레드 임에도 불구하고 동시에 많은 작업을 수행할 수 있다.하지만! 비동기로 동작하는 핵심 요소는 자바스크립트가 아닌 브라우저가 가지고 있다.(Node의 경우 libuv 라이브러리)
즉, 브라우저의 동작원리에 따라 비동기적 처리가 가능하다는 것!
브라우저는 Web APIs
, Event Table
, Callback Queue
, Event Loop
등으로 구성되어있다.
Heap : 메모리 할당이 발생하는 곳, 변수들이 저장되는 곳!
Call Stack : 실행된 코드의 환경을 저장하는 곳! 호출된 함수들은 콜스택에 저장된다.
함수들은 순서에 따라 아래서부터 위로 차곡차곡 쌓이는데, 가장 먼저 호출되는 함수는 제일 마지막에 쌓인 함수이다! ( 이것을 LIFO:last in first out 라고한다)
Web APIs : 브라우저에서 제공하는 api(공간)으로, dom, Ajax, timeout 등이 여기에서 호출된다.
Call Stack에서 실행된 비동기 함수는 Web API를 호출하고, Web API는 콜백 함수들을 Task Queue에 넣는다.
Callback Queue : 함수들을 저장하는 자료구조, 콜스택과 다르게 가장 먼저 들어온 함수를 가장 먼저 처리한다.
job queue
는 callback queue
와 다른 큐이며, promise 를 사용할 경우 job queue
를 사용하게 된다..then
을 사용하게 되며 이런 함수들은 job queue
에 추가된다.job queue
는 callback queue
보다 우선순위가 높다!job queue
에 기다리는 작업을 모두 처리한 뒤 콜백 큐로 이동하게 된다.Event Loop : 콜스택이 다 비워지면 콜백 큐에 존재하는 함수를 콜스택으로 옮기는 역활을 한다!