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

 

이벤트 루프에 알기 전에 먼저, 

자바스크립트 엔진의 구조를 먼저 보아야한다.

 

자바스크립트 엔진의 구조는 힙(heap)과 콜스택(callStack)으로 이루어져 있다.

힙은 메모리를 저장하는 공간이고 콜스텍은 함수가 실행이 되면 해당 함수에 대한 호출이 stack에 쌓여지고 처리하는 역할을 한다. 

 

일단 자바스크립트는 싱글 스레드의 형식이다. 즉, 한 번에 하나밖에 처리를 하지 못한다.

이 처리도 콜스택에 쌓이고 위에서부터 하나씩 처리해야 다음 처리가 가능하다.

 

그러면 setTimeout과 setInterval, ajax와 같은 처리들을 어떻게 하는 것일까?

얘네들은 알아서 시간에 맞춰서 실행되고 그러던데..?

 

이건 브라우저나 NodeJS에서 제공하는 이벤트 큐와 콜스택을 확인해주는 이벤트 루프가 있어서 가능하다!

 

일단 이벤트큐(task 큐(Queue))는 브라우저에서 비동기적으로 처리되는 함수들이 호출이 되면 해당 함수를 저장한다.

 

그러면 callstack에 있는 함수가 모두 처리가 되고 비워지게 되면 

 

이때 이벤트 루프가 콜스택이 비어져있는것을 보고 호다닥 이벤트큐에 있는 함수들을 콜스택에 하나씩 넣어서

이 함수들을 처리할 수 있도록 하는 것이다!

 

**

이벤트 큐에 있는 종류는 매크로 태스크 큐, 마이크로 태스크 큐가 있다.

매크로 태스크 큐는 이벤트 큐라고도 부르며, 비동기 함수 호출 후 콜백 함수 등이 담긴다.

마이크로 태스크 큐는 잡(job) 큐라고도 부르며,  setTimeout, setInterval, setImmediate, requestAnimationFrame, I/O, UI rendering 등과 같은 작업들을 담아둔다.

 

마이크로태스크 큐의 모든 태스크들을 처리한 다음, 매크로 태스크 큐의 태스크들을 처리한다